滚动条(兼容火狐、IE、chrome)[同事修改jsScrollbar]

最新推荐文章于 2023-06-27 15:18:39 发布
最新推荐文章于 2023-06-27 15:18:39 发布
阅读量337 收藏
点赞数
分类专栏： Web 文章标签： js jquery 滚动条 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylfighter/article/details/84116284
版权 

<!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>
ylfighter
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生javascript自定义滚动条（兼容IE，火狐，chrom)
10-04
原生javascript自定义滚动条（兼容IE，火狐，chrom)
适用于ie，firefox的scrollbar，在层中实现的
shiwjlolo的专栏
05-11 148
[code="html"] 无标题文档 aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa ...
火狐滑动条修改插件
12-04
火狐浏览器不能修改默认滑动条，加上并引用这个js可以对相应的滑动条进行修改
溢出滚动并去掉滚动条兼容火狐各浏览器
ocean_stars的博客
05-09 459
溢出滚动: overflow:scroll; 去掉滚动条: 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 .cc::-webkit-scrollbar{ display: none; } 兼容火狐 .cc { scrollbar-width: none; } 兼容IE10+ .cc { -ms-overflow-style: none; }
CSS滚动条颜色（IE支持，火狐不支持）
bravezhe的专栏
05-25 2519
注:火狐的话，可以用JS方法来实现 SCROLLBAR-FACE-COLOR: #CCCCC3; SCROLLBAR-SHADOW-COLOR: #CCCCC3; SCROLLBAR-HIGHLIGHT-COLOR: #CCCCC3; SCROLLBAR-3DLIGHT-COLOR: #CCCCC3; SCROLLBAR-DARKSHADOW-COLOR: #CCCCC3
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
10-20
在本文中，我们将探讨如何使用原生JavaScript来实现自定义浏览器滚动条，使其兼容IE、火狐和Chrome等主流浏览器。通常，CSS可以用来改变Chrome浏览器的滚动条样式，但对IE和火狐的支持有限。因此，为了实现跨浏览器...
FireFox火狐浏览器与IE兼容问题 – 透明滤镜 DIV滚动条
12-11
/*FireFox（火狐）不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了，标准的是pointer 问题二：FireFox（火狐）不支持滤镜 最常见的半透明不支持。 filter: Alpha(Opacity=50); /* for IE */ opacity: ...
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx
01-18
使用 CSS 可以自定义浏览器滚动条的样式，但是 CSS 只能转变 Chrome 和 IE 浏览器的样式，无法对 Firefox 浏览器进行样式定义。因此，我们需要使用 JavaScript 来实现自定义浏览器滚动条。 二、JavaScript 实现...
FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条
09-25
FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条 FireFox火狐浏览器与IE浏览器之间存在着一些兼容问题，这些问题可能会对网站的开发和维护产生影响。下面是关于FireFox火狐浏览器与IE浏览器兼容问题的总结： ...
vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条
01-09
本篇文章将详细探讨如何在Vue项目中自定义浏览器滚动条，同时确保兼容大部分浏览器，包括较为古老的Internet Explorer（IE）。 首先，我们需要理解浏览器滚动条的工作原理。滚动条由两个主要部分组成：轨道（track...
修改浏览器滚动条样式（兼容火狐，谷歌)
似水流年
07-02 1507
//在添加overflow-y的类名上添加以下样式可修改滚动条默认样式 .dialog{overflow-y: scroll; } //兼容谷歌 .root .dialog::-webkit-scrollbar { width: 5px; border-radius: 8px; } /* 滚动条颜色 */ .root .dialog::-webkit-scrollbar-track { background-color: #555; } .root .dialog::-..
css修改滚动条样式(兼容火狐)
CCKing7的博客
01-19 8517
css修改滚动条样式(兼容火狐)
自定义浏览器滚动条样式（兼容chrome和firefox）
最新发布
枫林残忆
06-27 2510
如果只是修改样式的，IE算是没辙了，但是firefox还有救。我的折中方式是，把chrome的样式设置和firefox一样。/**描述：自定义浏览器滚动条样式。示例：如 my-div 需要使用自定义滚动条，直接如下写法。.my-div {注意：元素需要使用 `overflow:hidden ` 属性。兼容性：兼容chrome和firefox，不兼容IE&:hover {} } & {如此，chrome和firefox可算长得一样了。
修改原生滚动条的样式，可兼容火狐，ie，谷歌
热门推荐
k912120的博客
09-10 1万+
小天地，大世界：https://www.lyblog.net/detail/314.html
火狐浏览器滚动条兼容问题
grootbaby
02-20 5716
在日常开发中，我们经常会用到 overflow: scroll; 但浏览器自带的默认滚动条很难看，因此我们会需要美化它 方法一：自定义美化 谷歌 chrome 浏览器美化滚动条方法：（网上有很多种美化方法，此为一种） .scrollbar { overflow: auto; float: left; border: none; } .scrollbar::-w...
兼容火狐浏览器滚动条样式
qq_39844855的博客
04-08 7696
首先需要引入jQuery和jquery.nicescroll npm install jquery npm install jquery.nicescroll 以下为jquery.nicescroll官网: https://nicescroll.areaaperta.com/how-to-use/ 在组件中使用 <template> <div> <div cl...
更改浏览器滚动条样式（火狐改不了）
xiao1215fei的专栏
07-26 7918
IE #userNavId{ scrollbar-face-color:#9aa1c4;/*滚动条颜色*/ scrollbar-highlight-color:#F60; scrollbar-3dlight-color:#F00; scrollbar-darkshadow-color:#000; scrollbar-Shadow-color:#000;
浏览器滚动条的兼容性问题
标子 的专栏
06-01 6439
通用的属性window.pageXoffset,window.pageYoffset.(ie8以下版本不支持) ie,火狐下: document.body.scrollTop:0 document.documentElement.scrollTop:x chrome: document.body.scrollTop:x document.documentElement.sc
改变overflow-y滚动条的css兼容Chrome 浏览器
06-11
要改变 `overflow-y` 滚动条的样式并兼容 Chrome 浏览器，可以使用以下 CSS 代码： ```css /* 隐藏滚动条 */ .element::-webkit-scrollbar { display: none; } /* 自定义滚动条轨道 */ .element::-webkit-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值