自定义滚动条3.0

时间:2021-05-18

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

    演示:
    * { 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://)。

    [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章