自定义滚动条3.0_javascript技巧
Lepaskan: 2016-05-16 18:50:00
asal
925 orang telah melayarinya
-
支持任意形式(包括图片自定义)的美化扩展,跨浏览器支持
-
支持鼠标按住上、下箭按钮实现上下滚动
-
支持鼠标滚轮放于“滚动条区”滚动,而不仅限放于滚动内容区才滚
-
支持鼠标按住滚动条(未松开)并移出滚动区域仍然能拖拽滚动
-
滚动条子根据左边滚动内容高与可视区域高度比例等比例,且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子
-
支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动(模拟windows滚动条)
-
支持键盘上下方向键,滚动区滚完之后才轮到页面body滚
-
支持页面刷新后保留滚动条滚动位置(需浏览器支持或打开cookie)
-
鼠标放于自定义滚动区滚动滚轮,滚动区滚完之后才轮到页面body滚
-
在原来几个版本基础上代码重构,这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染,而不设此class的不受影响
- 修复了以往版本所发现的bug:以往版本
将来版本可继续扩展的功能有:
1、增加空格键的“下方向”快速滚动支持(更好地模拟windows滚动条用户体验) 2、
增加页面body的渲染支持 3、
增加textarea的渲染支持 4、
增加嵌套div的渲染支持(目前代码嵌套时有滚动的bug,被嵌套的div的滚动高度算法到这个版本时将大幅修改) 5、
增加同时出现横向滚动条的支持(当有这方面需求时可以扩展) 演示:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
Topik-topik yang berkaitan
Lagi>