search

Home  >  Q&A  >  body text

css3 - 关于滚动条的CSS如何设置问题

<p id='p3' style='width:200px;height:200px;overflow:auto;'>
        This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.
    </p>

就像上面代码 p里面有一段文字,我设置了overflow:auto;也就是超出部分显示滚动条,那么我如何修改这个滚动条的样式呢?

巴扎黑巴扎黑2778 days ago666

reply all(4)I'll reply

  • ringa_lee

    ringa_lee2017-04-17 11:21:22

    An example of scroll bar beautification for Webkit browsers, I don’t know if this is what you want

    /* 滚动条部分 */
    ::-webkit-scrollbar {
        width:15px;
    }
    
    /* 轨道 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
        -webkit-border-radius: 15px;
        border-radius: 15px;
    }
    
    /* 手柄 */
    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 15px;
        border-radius: 15px;
        background:rgba(200,200,200,0.7); 
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }
    /* 手柄激活态 */
    ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(200,200,200,0.4); 
    }

    reply
    0
  • 迷茫

    迷茫2017-04-17 11:21:22

    Then just define the browser scroll bar style. The two are consistent. If you need it to be different, you need to simulate the scroll bar

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 11:21:22

    Recommend you to refer to this article: http://www.qianduan.net/css-custom-scroll-bar-style/
    The author is Shenfei of the WeChat team, and the articles he writes are always very good!

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:21:22

    Speaking of scrolling, change the scroll bar style. Why can the PC display normally. The mobile version doesn’t work

    reply
    0
  • Cancelreply