simulate-scrollbar

    1.1.6 • Public • Published

    simulate-scrollbar

    simulate beautify scrollbar

    description

    A Simulate the beautification of the scroll bar plug-in

    install

    npm install simulate-scrollbar

    usage

    <div style="overflow: hidden; position: relative; height: 350px; width:300px" id="el">
        <div>
          <ul>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
            <li>sgfdgdsfg</li>
          </ul>
        </div>
      </div>
    const scrollbar = require('simulate-scrollbar')
    
    or import scrollbar from 'simulate-scrollbar'
    
    or <script src='/dist/index.js' ></script>
    
    //通过第一个参数选取dom(必填,且必须设置高度或最大高度(最大高度必须为行内样式),同时设置时最大高度无效),第二个参数设置滚动条宽度(可缺省,缺省时默认为5px)
    let scroll = new scrollbar('#el', 10);
    

    ## setStyle

    // 设置滚动条样式(样式不支持设置高度)
    scroll.setStyle({
     block: {
       backgroundColor: '#222',
       borderRadius: '10px',
     },//滑块样式
     groove: {
       backgroundColor: '#aaa',
       borderRadius: '10px',
     }//滚动槽样式
    })
    

    ## setOption set Option(设置属性api):

    //dirtion bottom or top : refresh 时滚动的方向(底部或顶部) When refresh scrolling to the dirtion(bottom or top)
    scroll.setOption({
      dirtion: 'bottom',//bottom底部, 默认top, none表示绝对滚动位置不变 ('Bottom', default 'top', 'none' indicates that the absolute scrolling position is unchanged)
    })
    

    ## refresh if the length of the contents is changed(内容长度发生变化时调用):

    //The 'refresh' parameter is valid when dirtion is none, true means that the content is reduced or inserted from the top, false or not passed by default means that the content is reduced or inserted from the bottom('refresh' 参数在 dirtion为none 时有效,true表示内容由顶部减少或插入,false 或默认不传表示内容由底部减少或插入)
    
    scroll.refresh(refresh)
    

    Install

    npm i simulate-scrollbar

    DownloadsWeekly Downloads

    10

    Version

    1.1.6

    License

    ISC

    Unpacked Size

    20.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • wxgoldking