美文网首页
minisite 自定义滚动条

minisite 自定义滚动条

作者: LIsPeri | 来源:发表于2020-04-07 11:22 被阅读0次

    html:
    <div class='container'>
    <div class='div_scrolls'>
    需要滚动的内容
    </div>
    </div>

    css:

    scroller { position: relative; width: 620px; float: left; /border-right:1px solid #7c808f;/ padding:0 40px 40px 40px; }

    .container .div_scroll { width: 100%;overflow: auto; }
    .container .scroll_container { overflow: hidden; position: relative;height:800px }
    .container .scroll_absolute { position: absolute; }
    .container .scroll_drag { position: relative; top: 0; left: 0; cursor: pointer; background-color: #f4f3f6; border-radius: 5px; }
    .container .scroll_vertical_bar { position: absolute; top: 0px; right: 8px; width:8px; height: 100%; background:#c7c4d4; background: url(../image/scroll_bg.png) repeat-y center 0; margin: 0; padding: 0; }
    .container .scroll_track {border-radius: 5px; position: relative; background-color: #c7c4d4;border: 1px solid #cdcad8; }
    .container .scroll_arrow { text-indent: -20000px; display: block; cursor: pointer; background-color: #369DB4; }
    .container .scroll_vertical_bar .scroll_arrow { height: 16px; }

    js:

    需要引入mousewheel.js和easyscroll.js两js

    var _h=document.body.clientHeight;
    ('.div_scroll,.scroll_container').css('height',_h-310);(".div_scroll").scroll_absolute({arrows:false});

    相关文章

      网友评论

          本文标题:minisite 自定义滚动条

          本文链接:https://www.haomeiwen.com/subject/ehzluhtx.html