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;也就是超出部分显示滚动条,那么我如何修改这个滚动条的样式呢?

巴扎黑巴扎黑2764 days ago650

reply all(4)I'll reply

  • ringa_lee

    ringa_lee2017-04-17 11:21:22

    一个针对Webkit内核浏览器的滚动条美化的例子,不知道是不是你想要的

    /* 滚动条部分 */
    ::-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

    那就定义浏览器滚动条样式即可,两者是一致的,如果需要不一样,那就需要模拟滚动条

    reply
    0
  • PHP中文网

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

    推荐你参考这篇文章:http://www.qianduan.net/css-custom-scroll-bar-style/
    作者是微信团队的神飞,写的文章一直很不错!

    reply
    0
  • 伊谢尔伦

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

    话说滚动更改滚动条样式。为什么pc端可以正常显示。手机端就不行了呢

    reply
    0
  • Cancelreply