首页 / JAVASCRIPT / 自定义滚动条3.0

自定义滚动条3.0

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了自定义滚动条3.0，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12656字，纯文字阅读大概需要19分钟。

内容图文

支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持
支持鼠标按住上、下箭按钮实现上下滚动
支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚
支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动
滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子
支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）
支持键盘上下方向键，滚动区滚完之后才轮到页面body滚
支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）
鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚
在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响
修复了以往版本所发现的bug：以往版本

将来版本可继续扩展的功能有：
1、增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）
2、增加页面body的渲染支持
3、增加textarea的渲染支持
4、增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）
5、增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）

演示：

<!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=gb2312" /> 
<title></title> 
<style type="text/css"> 
* { margin:0; padding:0; } 
body { margin:20px 0 400px 20px; font:12px Arial; } 
h1 { font-size:14px; } 
ol,ul { margin:20px; line-height:160%; } 
ul li { color:#f00; } 
.a1 { width:300px; height:190px; border:1px solid #f00; overflow:auto; } 
.a2 { width:600px; height:350px; margin:100px 0 100px 80px; border:1px solid #369; background:#eee url(http://www.blueidea.com/articleimg/2009/07/6875/duma.gif) no-repeat 50%; overflow:auto; } 
.dumascroll {} /*只需对需要渲染滚动条的div设置该class即可*/ 
.dumascroll_area { 
 height:100%; 
 overflow:hidden; 
} 
.dumascroll_bar,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { 
 background-image:url(http://www.blueidea.com/articleimg/2009/07/6875/un_bg_bar.gif); 
} 
.dumascroll_bar { 
 position:absolute; 
 top:0; 
 right:0; 
 z-index:9; 
 width:14px; 
 height:100%; 
 cursor:default; 
 -moz-user-select:none; 
 -khtml-user-select:none; 
 user-select:none; 
 background-repeat:repeat-y; 
 background-position:-42px 0; 
 float:left; 
} 
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { 
 position:absolute; 
 left:0; 
} 
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { 
 width:100%; 
 height:14px; 
 color:#fff; 
 text-align:center; 
} 
.dumascroll_arrow_up,.dumascroll_arrow_up_a { top:0; } 
.dumascroll_arrow_down,.dumascroll_arrow_down_a { bottom:0; } 
.dumascroll_handle,.dumascroll_handle_a { width:100%; background-repeat:repeat-y; } 
.dumascroll_arrow_up { background-position:0 0; } 
.dumascroll_arrow_up_a { background-position:-14px 0; } 
.dumascroll_handle { background-position:-28px 0; } 
.dumascroll_handle_a { background-position:-56px 0; } 
.dumascroll_arrow_down { background-position:-70px 0; } 
.dumascroll_arrow_down_a { background-position:-84px 0; } 
</style> 
<script> 
var duma = { 
 $:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} }, 
 getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); }, 
 getOffset:function(o) { 
 var t = o.offsetTop,h = o.offsetHeight; 
 while(o = o.offsetParent) { t += o.offsetTop; } 
 return { top:t, height:h }; 
 }, 
 bind:function(o,eType,fn) { 
 if(o.addEventListener) { o.addEventListener(eType,fn,false); } 
 else if(o.attachEvent) { o.attachEvent("on" + eType,fn); } 
 else { o["on" + eType] = fn; } 
 }, 
 stopEvent:function(e) { 
 e = e || window.event; 
 e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false); 
 }, 
 setCookie:function(c_name,value,expiredays) { 
 var exdate = new Date(); 
 exdate.setDate(exdate.getDate() + expiredays); 
 document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); 
 }, 
 getCookie:function(c_name) { 
 if(document.cookie.length > 0) { 
 c_start = document.cookie.indexOf(c_name + "="); 
 if(c_start != -1) { 
 c_start = c_start + c_name.length + 1; 
 c_end = document.cookie.indexOf(";",c_start); 
 if(c_end == -1) { c_end = document.cookie.length; } 
 return unescape(document.cookie.substring(c_start,c_end)); 
 } 
 } 
 return ""; 
 } 
}; 
duma.BeautifyScrollBar = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) { 
 this.arrowUpInterval; 
 this.arrowDownInterval; 
 this.barMouseDownInterval; 
 this.relY; 
 this.id = obj; 
 this.obj = duma.$(this.id); 
 this.setObjCss(); //预先设置父容器的css定位才能让接下来的属性设置起作用 
 this.obj.innerHTML = '' + this.obj.innerHTML + ''; 
 this.area = duma.$(obj + "Area"); 
 this.bar = duma.$(obj + "Bar"); 
 this.barPos; 
 this.arrowUp = this.bar.getElementsByTagName("div")[0]; 
 this.arrowUpCss = arrowUpCss; 
 this.arrowUpActiveCss = arrowUpActiveCss; 
 this.handle = this.bar.getElementsByTagName("div")[1]; 
 this.handleCss = handleCss; 
 this.handleActiveCss = handleActiveCss; 
 this.arrowDown = this.bar.getElementsByTagName("div")[2]; 
 this.arrowDownCss = arrowDownCss; 
 this.arrowDownActiveCss = arrowDownActiveCss; 
 this.handleMinHeight = 15; 
 this.arrowUpHeight = parseInt(duma.getStyle(this.arrowUp).height); 
 this.arrowDownHeight = parseInt(duma.getStyle(this.arrowDown).height); 
 this.areaScrollHeight = this.area.scrollHeight; 
 this.handleHeight = parseInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight)); 
} 
duma.BeautifyScrollBar.prototype = { 
 setObjCss:function() { 
 duma.getStyle(this.obj).position == "static" ? this.obj.style.position = "relative" : duma.getStyle(this.obj).backgroundColor == "transparent" ? this.obj.style.backgroundColor = "#fff" : null; //若容器本来就没有设position，则初始化为relative；若容器原来未设置背景色，则初始化为白色； 
 }, 
 sethandle:function() { //当内容超多时设置拖拽条子的最小高度 
 this.handle.style.top = this.arrowUpHeight + "px"; 
 if(this.handleHeight > this.handleMinHeight) { 
 this.handleHeight < this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight ? this.handle.style.height = this.handleHeight + "px" : this.handle.style.display = "none"; 
 } 
 else { this.handleHeight = this.handleMinHeight; this.handle.style.height = this.handleMinHeight + "px"; } 
 }, 
 setBarPos:function() { //将当前滚动的距离值存入cookie 
 this.barPos = this.area.scrollTop + ""; 
 duma.setCookie(this.id + "CookieName",this.barPos,1); 
 }, 
 getBarPos:function() { 
 this.barPos = duma.getCookie(this.id + "CookieName"); 
 if(this.barPos!=null && this.barPos!="") { 
 this.area.scrollTop = this.barPos; 
 this.areaScroll(); 
 } 
 }, 
 clearArrowUpInterval:function() { clearInterval(this.arrowUpInterval); }, 
 clearArrowDownInterval:function() { clearInterval(this.arrowDownInterval); }, 
 clearBarMouseDownInterval:function() { clearInterval(this.barMouseDownInterval); }, 
 areaScroll:function() { 
 this.handle.style.display != "none" ? this.handle.style.top = this.area.scrollTop/(this.area.scrollHeight - this.area.offsetHeight) * (this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight) + this.arrowUpHeight + "px" : null; 
 }, 
 areakeydown:function(e) { //支持键盘上下按键 
 var that = this; 
 document.onkeydown = function(event) { 
 var e = event || window.event, 
 ek = e.keyCode || e.which; 
 if(ek == 40) { that.area.scrollTop += 25 } 
 else if(ek == 38) { that.area.scrollTop -= 25 } 
 if(that.area.scrollTop > 0 && that.area.scrollTop < that.area.scrollHeight - that.area.offsetHeight){ duma.stopEvent(e); } 
 that.setBarPos(); 
 } 
 }, 
 handleMove:function(e) { 
 var e = e || window.event; 
 this.area.scrollTop = (e.clientY - this.relY - this.arrowUpHeight)/(this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight)*(this.area.scrollHeight - this.area.offsetHeight); 
 this.setBarPos(); 
 }, 
 handleMouseDown:function(e) { 
 var that = this,e = e || window.event; 
 that.relY = e.clientY - that.handle.offsetTop; 
 that.handle.setCapture ? that.handle.setCapture() : null; 
 that.handle.className = that.handleActiveCss; 
 document.onmousemove = function(event) { that.handleMove(event); }; 
 document.onmouseup = function() { 
 that.handle.className = that.handleCss; 
 that.handle.releaseCapture ? that.handle.releaseCapture() : null; 
 document.onmousemove = null; 
 }; 
 }, 
 barScroll:function(e) { 
 var e = e || window.event,eDir; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向 
 if(e.wheelDelta) { eDir = e.wheelDelta/120; } 
 else if(e.detail) { eDir = -e.detail/3; } 
 eDir > 0 ? this.area.scrollTop -= 80 : this.area.scrollTop += 80; //步长设80像素比较接近window滚动条的滚动速度 
 if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight){ duma.stopEvent(e); } 
 this.setBarPos(); 
 }, 
 barDown:function(e) { 
 var e = e || window.event,that = this, 
 eY = e.clientY, 
 mStep = this.bar.offsetHeight, 
 documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop, 
 hOffset = duma.getOffset(this.handle), 
 bOffset = duma.getOffset(this.bar); 
 if(documentScrollTop + eY < hOffset.top) { this.barMouseDownInterval = setInterval(function(e){ 
 that.area.scrollTop -= that.area.offsetHeight; 
 if(that.area.scrollTop <= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); } 
 that.setBarPos(); 
 },80); } 
 else if(documentScrollTop + eY > hOffset.top + hOffset.height) { this.barMouseDownInterval = setInterval(function(){ 
 that.area.scrollTop += that.area.offsetHeight; 
 if(that.area.scrollTop >= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight - hOffset.height)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); } 
 that.setBarPos(); 
 },80); } 
 duma.stopEvent(e); 
 }, 
 arrowUpMouseDown:function(e) { 
 var that = this; 
 this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10); 
 this.arrowUp.className = this.arrowUpActiveCss; 
 duma.stopEvent(e); 
 }, 
 arrowUpMouseUp:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; }, 
 arrowUpMouseOut:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; }, 
 arrowDownMouseDown:function(e) { 
 var that = this; 
 this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; that.setBarPos(); },10); 
 this.arrowDown.className = this.arrowDownActiveCss; 
 duma.stopEvent(e); 
 }, 
 arrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; }, 
 arrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; }, 
 run:function(){ 
 var that = this; 
 this.sethandle(); 
 this.areaScroll(); 
 this.getBarPos(); 
 this.area.onscroll = function(){that.areaScroll()}; 
 this.area.onmouseover = this.bar.onmouseover = function(event){that.areakeydown(event)}; 
 this.area.onmouseout = this.bar.onmouseout = function(){document.onkeydown = null}; 
 this.handle.onmousedown = function(event){that.handleMouseDown(event)}; 
 this.bar.onmousedown = function(event){that.barDown(event)}; 
 this.bar.onmouseup = function(){that.clearBarMouseDownInterval()}; 
 this.bar.onmouseout = function(){that.clearBarMouseDownInterval()}; 
 this.arrowUp.onmousedown = function(event){that.arrowUpMouseDown(event)}; 
 this.arrowUp.onmouseup = function(){that.arrowUpMouseUp()}; 
 this.arrowUp.onmouseout = function(){that.arrowUpMouseOut()}; 
 this.arrowDown.onmousedown = function(event){that.arrowDownMouseDown(event)}; 
 this.arrowDown.onmouseup = function(){that.arrowDownMouseUp()}; 
 this.arrowDown.onmouseout = function(){that.arrowDownMouseOut()}; 
 duma.bind(this.obj,"mousewheel",function(event){that.barScroll(event)}); 
 duma.bind(this.obj,"DOMMouseScroll",function(event){that.barScroll(event)}); 
 } 
} 
duma.BeautifyScrollBar.init = function() { 
 var o = document.getElementsByTagName("div"), 
 oLen = o.length, 
 dumascrollClass = /\bdumascroll\b/, 
 oArr = [], 
 oArrLen = oArr.length; 
 for(var i=0; i<oLen; i++) { 
 if(dumascrollClass.test(o[i].className)) { 
 oArr.push("dumaScrollAreaId_" + i); 
 oArrLen = oArr.length; 
 o[i].id = oArr[oArrLen - 1]; 
 } 
 } 
 for(var j=0; j<oArrLen; j++) { 
 new duma.BeautifyScrollBar(oArr[j],"dumascroll_arrow_up","dumascroll_arrow_up_a","dumascroll_handle","dumascroll_handle_a","dumascroll_arrow_down","dumascroll_arrow_down_a").run(); 
 } 
} 
duma.bind(window,"load",duma.BeautifyScrollBar.init); 
</script> 
</head> 
<body> 
 
我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 我是第一个被渲染的，真不幸 
 
 
我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 
我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！ 
 
 
22222 
真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 真倒霉啊，俺还是被嵌套渲染的，555555 
 
 
笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧 
 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 
 
<h1>图片自定义滚动条3.0（Duma"自动渲染版"，也许世间万物都会变，但是真挚的爱，却永远留存在心中！）</h1> 
<ol> 
<li>支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持</li> 
<li>支持鼠标按住上、下箭按钮实现上下滚动</li> 
<li>支持鼠标滚轮放于"滚动条区"滚动，而不仅限放于滚动内容区才滚</li> 
<li>支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动</li> 
<li>滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子</li> 
<li>支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）</li> 
<li>支持键盘上下方向键，滚动区滚完之后才轮到页面body滚</li> 
<li>支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）</li> 
<li>鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚</li> 
<li>在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响</li> 
<li>修复了以往版本所发现的bug：以往版本</li> 
</ol> 
<h2>将来版本可继续扩展的功能有：</h2> 
<ul> 
<li>增加空格键的"下方向"快速滚动支持（更好地模拟windows滚动条用户体验）</li> 
<li>增加页面body的渲染支持</li> 
<li>增加textarea的渲染支持</li> 
<li>增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）</li> 
<li>增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）</li> 
</ul> 
期待大家帮忙寻找新bug并提出宝贵建议，相信下一版本将做的更好，谢谢（QQ：149561420，gTalk：dumachuixuf@gmail.com）。 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的自定义滚动条3.0全部内容，希望文章能够帮你解决自定义滚动条3.0所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/373246.html

来源：【匿名】

首页 / JAVASCRIPT / 自定义滚动条3.0

自定义滚动条3.0

内容导读

内容图文

内容总结

内容备注

内容手机端

【自定义滚动条3.0】教程文章相关的互联网学习教程文章

js基础---其余的样式相关的属性/判断滚动条是否到底

js 滚动条判断是否滚动到底部【代码】

javascript 学习之自定义滚动条加滚轮事件【代码】【图】

javascript之检测浏览器滚动条宽度【代码】【图】

python 通过js控制滚动条拉取全文通过psutil获取pid窗口句柄，通过win32gui使程序窗口前置通过pyauto实现右键菜单和另存为操作【代码】

javascript自定义滚动条插件，几行代码的事儿【代码】

JavaScript学习笔记- 自定义滚动条插件【代码】

javascript下for(in)语句获得所有style的【scrollbar】滚动条样式内容_表单特效

jQuery页面图片伴随滚动条逐渐显示的小例子

基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动

窗体滚动条出现在左侧的实例代码_文字特效

js图片延迟加载(随滚动条滑动)

【荐】JS+CSS实现用滚动条控制图片水平展示效果

javascript-Echarts中的图例legend过多可否加滚动条

javascript-网站右边突然多出了一个滚动条，怎么回事？【图】

自定义 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程