【问题标题】:Styling scrollbar to overlay to border right样式滚动条覆盖到右边框
【发布时间】:2021-06-25 05:41:13
【问题描述】:

我在设置这样的滚动条时遇到问题。是否可以这样设置样式?

【问题讨论】:

    标签: html css sass


    【解决方案1】:

    是的,可以设置滚动条的样式。

    对于chrome浏览器,你可以使用这些sn-ps:

    ::webkit-scrollbar  
    ::webkit-scrollbar-thumb  
    ::webkit-scrollbar-track
    

    要将您的样式应用于所有浏览器,您可以使用这些 JS 库:

    Overlay ScrollbarsSimple Bar

    【讨论】:

      【解决方案2】:

      您可以使用代码:

      ::-webkit-scrollbar {
        width: 10px;
      }
      
      ::-webkit-scrollbar-track {
        background: #f1f1f1; 
      }
       
      ::-webkit-scrollbar-thumb {
        background: #555; 
        border-radius: 10px;
        width: 10px;
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background: #333; 
      }
      

      不能减小滚动条轨道的宽度,可以休息。另外,请注意,您无法更改 Firefox 和旧版 Edge 的滚动条样式。

      【讨论】:

      • 感谢您的回复有没有办法将滚动条重叠到 div 的右侧边框?
      【解决方案3】:

      您可以使用这些选择器进行设计,但不推荐。

      ::webkit-scrollbar  
      ::webkit-scrollbar-thumb  
      ::webkit-scrollbar-track
      

      我认为最好隐藏滚动条并创建由 javascript 代码移动的假滚动条。
      你可以用 display: none 属性隐藏它

      【讨论】:

      • 非常感谢您的建议。我会尝试用 javascript 来做到这一点:)
      猜你喜欢
      • 1970-01-01
      • 2021-12-22
      • 1970-01-01
      • 1970-01-01
      • 2017-12-13
      • 2013-07-07
      • 2020-12-01
      • 1970-01-01
      相关资源
      最近更新 更多