<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding: 0px; list-style:none;}
.box { width:500px; margin:0 auto; position:relative; top:100px; }
.Container { position: absolute; top:0px; left: 100px; width: 400px; height: 200px; background-color: #EEE; }
#Scroller-1 { position: absolute; overflow: hidden; width: 400px; height: 200px; }
#Scroller-1 p { margin: 0; padding: 10px 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #777; }
.Scroller-Container { position: absolute; top: 0px; left: 0px; }
.Scrollbar-Track { width: 10px; height: 200px; position: absolute; top: 0px; right:0px; background-color: #EEE; cursor:pointer; }
.Scrollbar-Handle { position: absolute; top: 0px; left: 0px; width: 10px; height: 30px; background-color: #CCC; }
</style>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i]; // 以 o 为对象,将对象包含的class名为Scroller-Container的元素付给 对象 o
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
if(window.event){
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
}//W3C
else{
this._addEvent(this._src.content, "DOMMouseScroll", this._scrollbarWheel);
}
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent('on'+ t, f);
else o['on'+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent('on'+ t, f);
else o['on'+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
if(e.detail >=3) dir= 1;
if(e.detail <=-3) dir = -1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {// 判断浏览器
if(window.event){
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
}//W3C
else{
this._removeEvent(this._src.content, "DOMMouseScroll", this._scrollbarWheel, false);
}
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
};
</script>
</head>
<body>
<div class="box">
<div class="Container">
<div id="Scroller-1">
<div style="left: 0px; top: -596px;" class="Scroller-Container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo
ligula enim ac justo. Pellentesque id ligula. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam
blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut,
condimentum non, ullamcorper eu, neque. In hac habitasse platea
dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed,
libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum,
dolor ligula ultrices neque, in elementum ante erat et elit.</p>
<p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium
sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula.
Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam
eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin
neque. Aliquam erat volutpat. Pellentesque felis.</p>
<p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse
mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum,
elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac
habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi.
Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl.
Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo
ligula enim ac justo. Pellentesque id ligula. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam
blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut,
condimentum non, ullamcorper eu, neque. In hac habitasse platea
dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed,
libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum,
dolor ligula ultrices neque, in elementum ante erat et elit.</p>
<p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium
sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula.
Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam
eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin
neque. Aliquam erat volutpat. Pellentesque felis.</p>
<p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse
mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum,
elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac
habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi.
Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl.
Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
</div>
</div>
</div>
<div style="visibility: visible;" id="Scrollbar-Container">
<div class="Scrollbar-Track">
<div style="top: 70px; left: 0px; visibility: visible;" class="Scrollbar-Handle"></div>
</div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
本篇文章将详细探讨如何在Vue项目中自定义浏览器滚动条,同时确保兼容大部分浏览器,包括较为古老的Internet Explorer(IE)。 首先,我们需要理解浏览器滚动条的工作原理。滚动条由两个主要部分组成:轨道(track...
使用 CSS 可以自定义浏览器滚动条的样式,但是 CSS 只能转变 Chrome 和 IE 浏览器的样式,无法对 Firefox 浏览器进行样式定义。因此,我们需要使用 JavaScript 来实现自定义浏览器滚动条。 二、JavaScript 实现...
在网页设计中,为了提升用户体验,设计师们常常会利用CSS(Cascading Style Sheets)来定制浏览器的滚动条...不过,随着IE浏览器逐渐被淘汰,开发者可能需要更多地关注对Chrome、Firefox等现代浏览器的滚动条样式支持。
标题“自定义滚动条(兼容所有浏览器)”所提及的知识点,就是如何通过CSS和JavaScript技术来定制滚动条的外观和行为,同时确保其在各个主流浏览器中都能正常工作。 **1. CSS Scrollbar Customization** CSS3引入...
针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...
本篇文章将深入探讨如何使用JavaScript实现自定义滚动条,并确保其在Internet Explorer(IE)、Firefox和Chrome等主流浏览器中的兼容性。 首先,我们需要理解不同浏览器对滚动条的支持情况。在CSS中,Webkit内核的...
兼容ie滚动条前端代码,兼容ie滚动条js代码。兼容ie滚动条前端代码,兼容ie滚动条js代码。兼容ie滚动条前端代码,兼容ie滚动条js代码。兼容ie滚动条前端代码,兼容ie滚动条js代码。兼容ie滚动条前端代码,兼容ie滚动...
图片滚动展示单击放大代码,使用prettyPhoto插件,代码兼容:IE6,IE7,IE8,Firefox,chrome 使用方法: 1.head区域引用样式文件prettyphoto.css,htmldivcss.css 2.head区域引用JS文件jquery.js,jquery....
本话题主要涉及以下几个关键知识点:表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性,特别是针对IE、Firefox(FF)和Safari这三大主流浏览器。 1. **表格题头拖动**:这是一种交互设计特性,...
element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的...
"兼容IE的滚动条"这个主题主要关注如何确保在IE浏览器中实现一致且美观的滚动条样式。 在IE中,滚动条的样式默认比较朴素,与页面设计可能不协调。为了改善这一情况,开发者可以利用特定的CSS hack或者JavaScript库...
修改火狐滚动条样式demo,纯css修改火狐默认的滚动条样式
下面我们将详细讨论如何构建一个兼容不同浏览器(如IE、Firefox和Chrome)的树形结构。 首先,HTML是构建页面的基本框架。在这个例子中,我们可以创建一个`<div>`元素作为顶级目录,并包含一个ID为"menulist"的`...
4. **兼容性好**:插件兼容多种浏览器,包括IE8+、Firefox、Chrome、Safari、Opera等,确保了在各种环境下都能正常工作。 5. **多样化的示例**:mCustomScrollbar提供了大量实例,涵盖了各种应用场景,无论是基础的...
在本文中,我们将探讨如何使用原生JavaScript来实现自定义浏览器滚动条,使其兼容IE、火狐和Chrome等主流浏览器。通常,CSS可以用来改变Chrome浏览器的滚动条样式,但对IE和火狐的支持有限。因此,为了实现跨浏览器...
在实际项目中,我们还需要考虑到其他浏览器的兼容性,例如Firefox、Edge等,它们可能有自己的滚动条样式API。因此,建议采用条件注释、特性检测或现代CSS预处理器来实现跨浏览器的兼容性。 总的来说,实现一个兼容...
在这个项目中,我们关注的是一个简单的JS滚动新闻实现,它不仅支持早期的Internet Explorer 6(IE6),还兼容其他主流的现代浏览器。 在Web开发中,滚动新闻是一种常见的功能,它能够在页面上动态展示新闻标题或...
综上所述,JavaScript在处理滚动条兼容性方面提供了多种方法和策略,包括使用CSS自定义Webkit内核的滚动条样式,通过事件监听滚动行为,以及借助第三方库实现更强大的自定义滚动条功能。在实际开发中,应根据项目...
实现JavaScript瀑布流兼容IE、Firefox和Chrome的方法包括: 1. 使用条件注释或者现代izr库来检测浏览器版本和特性。 2. 对于不支持CSS3 Flexbox或Grid的浏览器,可以使用JavaScript来计算和设置元素的样式,如宽度...
符合标准的间隙间歇滚动代码(兼容IE和FireFox).htm 符合标准的间隙间歇滚动代码(兼容IE和FireFox).htm