原生js滚动插件(原创)

所属分类:UI-滚动

 6602  55  查看评论 (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滚动收缩导航

jQuery滚动收缩导航
  滚动
 37119  373

HTML5单页面全屏滚动特效

全屏滚动代码简单,非常适合新手。
  滚动
 54526  474

jQuery横向全屏切换滚动

jQuery横向全屏切换滚动兼容ie6
  滚动
 50137  456

漂浮广告插件

漂浮广告插件,上下滚动浮动垂直剧中。
  滚动
 35140  347

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

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