原生js滚动插件(原创)

所属分类:UI-滚动

 7286  56  查看评论 (0)
分享到微信朋友圈
X
原生js滚动插件(原创) ie兼容8

更新时间:2021-03-08 21:55:16

更新说明:修改scrollbox设置百分比高度bug,添加高度未超出时,不显示滚动条的逻辑


更新时间:2021-02-07 23:09:39

使用方法

第1步:引入css、js 

第2步:创建4层节点 

<div id="scrollbox"><div><div>
    <div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    ...
    </div>
</div></div></div>

第3步:如果是纵轴滚动,设置最大高度或高度,

overflow: hidden;#scrollbox {
    max - height: 600 px;
    overflow: hidden;
}

第4步:创建滚动轴对象

var oScrollbar = new TScrollBar('#scrollbox');

如果是横轴滚动,需要初始化时设置宽度

var oScrollbar = new TScrollBar('#scrollbox', {
    direction: 'horizontal',
    width: 1000
});
相关插件-滚动

简洁的jQuery滚动条插件scrollBar.js

本插件会将容器中滚动条样式进行统一,通过修改css任意改变滚动条的宽度与颜色,实现自定义滚动条的目的。
  滚动
 64633  383

滚动条

可定制的滚动条,通过js+css实现
  滚动
 54532  335

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 38821  438

jQuery鼠标滚屏锚点定位

利用mousewheel库实现滚屏事件,同时支持侧边栏控制
  滚动
 33915  393

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复