search

Home  >  Q&A  >  body text

javascript - 如何美化滚动条,做到可以模拟原生的滚动条啊?

我有一个很长的列表被定在高为300的像素p中.
效果要滚动,overflow-y:auto, 不过样子很丑。

我就想弄一个p模拟原生的滚动条.盖在上面.

如果是这样的话啊,这个滚动条的长度要怎么计算(这个长度是那个移动的小方块)? 在不同的高度下长度是不一样的.

还有position:absolute好像不能定位到原生的滚动条上遮盖不到.

PHP中文网PHP中文网2826 days ago439

reply all(3)I'll reply

  • 黄舟

    黄舟2017-04-10 15:49:51

    <p class='outer' style='height:300px;overflow:hidden'>
        <p class='inner' style='height:1200px'></p>
    </p>

    首先, 外层overflow设置成hidden吧,内层的随意。
    至于高度,如果你用jQuery的话,大概就是去取那个内层p的高度。$("xxx").height()就成了。不是jQuery的话,好像clientHeight?我不确定……

    reply
    0
  • 怪我咯

    怪我咯2017-04-10 15:49:51

    如果是webkit的浏览器的话,有个::-webkit-scrollbar美化
    参考这两篇文章:
    https://css-tricks.com/custom-scrollbars-in-webkit/
    http://www.cnblogs.com/rubylouvre/archive/2011/03/01/1968057.html

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 15:49:51

    好像有个jquery.scroller

    reply
    0
  • Cancelreply