源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

自定义滚动条3.0

时间：2022-06-11 12:22 编辑：来源：阅读：
扫一扫，手机访问

摘要：自定义滚动条3.0

[list=1] [*]支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持 [/*][*]支持鼠标按住上、下箭按钮实现上下滚动 [/*][*]支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚 [/*][*]支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动 [/*][*]滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子 [/*][*]支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条） [/*][*]支持键盘上下方向键，滚动区滚完之后才轮到页面body滚 [/*][*]支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie） [/*][*]鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚 [/*][*]在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响 [/*][*]修复了以往版本所发现的bug：[url=http://bbs.blueidea.com/thread-2936181-1-3.html]以往版本[/url] [/*][/list][b]将来版本可继续扩展的功能有[/b]：
1、增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）
2、增加页面body的渲染支持
3、增加textarea的渲染支持
4、增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）
5、增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）

演示：

<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
 
 
 
 
 
<div class="a dumascroll b" style="width:300px; height:190px; padding:5px; border:1px solid #f00; line-height:400%; overflow:hidden;"> 
我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br>我是第一个被渲染的，真不幸
</br> 
</div> 
<div class="a dumfaf" style="width:400px; height:100px; margin:20px; border:2px inset #eee; overflow:auto;"> 
我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br> 
我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！
</br> 
</div> 
<div class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1px solid #369; background:#eee url(http://www.blueidea.com/articleimg/2009/07/6875/duma.gif) no-repeat 50%; overflow:hidden;"> 
22222
</br><div class="a dumascroll b" style="width:200px; height:150px; margin:20px; border:1px solid #093; line-height:400%; background:#fff; overflow:hidden; float:left;"> 
真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 真倒霉啊，俺还是被嵌套渲染的，555555
</br> 
</div> 
<div class="a" style="width:200px; height:120px; margin:20px; border:2px inset #eee; background:#fff; overflow:auto; float:right; float:right;"> 
笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧
</br> 
</div>
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111
</br>fsdfs
</br>11111111 
</div> 
<h1>图片自定义滚动条3.0（Duma"自动渲染版"，也许世间万物都会变，但是真挚的爱，却永远留存在心中！）</h1> 
[list=1] 
[*]支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持[/*] 
[*]支持鼠标按住上、下箭按钮实现上下滚动[/*] 
[*]支持鼠标滚轮放于"滚动条区"滚动，而不仅限放于滚动内容区才滚[/*] 
[*]支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动[/*] 
[*]滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子[/*] 
[*]支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）[/*] 
[*]支持键盘上下方向键，滚动区滚完之后才轮到页面body滚[/*] 
[*]支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）[/*] 
[*]鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚[/*] 
[*]在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响[/*] 
[*]修复了以往版本所发现的bug：[url=http://bbs.blueidea.com/thread-2936181-1-3.html]以往版本[/url][/*] 
[/list] 
[h1]将来版本可继续扩展的功能有：[/h1] 
[list] 
[*]增加空格键的"下方向"快速滚动支持（更好地模拟windows滚动条用户体验）[/*] 
[*]增加页面body的渲染支持[/*] 
[*]增加textarea的渲染支持[/*] 
[*]增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）[/*] 
[*]增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）[/*] 
[/list] 
期待大家帮忙寻找新bug并提出宝贵建议，相信下一版本将做的更好，谢谢（QQ：149561420，gTalk：dumachuixuf@gmail.com）。

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：js删除数组元素、清空数组的简单方法(必看)
下一篇：体验js中splice()的强大(插入、删除或替换数组的元素)

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部