原生js滚动插件(原创)

所属分类:UI-滚动

 6969  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
});
相关插件-滚动

jQueryScrollPage单页全屏滚动效果

漂亮的jQuery单页全屏滚动,带视差效果
  滚动
 36702  393

jQuery美化滚动条插件mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义
  滚动
 34152  335

jQuery滚动收缩导航

jQuery滚动收缩导航
  滚动
 37602  373

jQuery瀑布流插件

jQuery瀑布流,结合animate.css、wow.js滚动展示效果,可扩展性强。
  滚动
 32309  313

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

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