Question

当滚动条滑块一直指向箭头时，普通镀铬滚动条箭头按钮具有类似禁用状态。

用于样式化滚动条的::-webkit-scrollbar*个选择器。

我可以使用哪个选择器来设置按钮的特定状态？ ::webkit-scrollbar-button:disabled不适用于此状态。

Codepen：https://codepen.io/mattyork/pen/oGWOZY?editors=1100

Answer 1

如果没有要滚动的内容，我只会完全隐藏滚动条。

body {
        overflow: hidden;
        height: 100vh;
     }

Answer 2

<强>答案

从我的基础研究来看，我不确定这是可能的。基于这个css-tricks.com页面，我敢打赌你已经看过，它没有为活动或非活动滚动条按钮列出任何伪选择器。以下是列出的选择器。

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

相反，您可以考虑一起删除所有按钮。

Answer 3

您可以使用jquery插件尝试此操作。

我已附上Github link.

以下是Plugin webpage.

您还可以从此link找到滚动条的示例。

另一种方法：

CSS滚动条自定义

    * {
      list-style:none;
      margin:0;
      padding:0;
    }
    body {
      background: #333;
      padding:20px;
    }
    #content {
      background:transparent;
      height:400px;
      padding:0 10px 0 0;
      width:400px;
    }
    #content li {
      background:#666;
      height:100px;
      margin-bottom:10px;
    }
    #content li:last-child { margin-bottom: 0; }

    .scrollable-content {
      overflow-x:hidden;
      overflow-y:scroll;
    }
    .scrollable-content::-webkit-scrollbar {
      width:30px;
    }
    .scrollable-content::-webkit-scrollbar * {
      background:transparent;
    }
    .scrollable-content::-webkit-scrollbar-thumb {
      background:#999 !important;
    }

<ol class="scrollable-content" id="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

希望这可以帮到你。

Answer 4

我只能想到通过JavaScript做到这一点，

// Every time the window scrolls.
addEventListener("scroll", () => {
    // When scrollbar is at its zenith, do your CSS.
    if (!document.querySelector("style[data-id=myStyle"))
        head.innerHTML += `<style data-id=myStyle> ::-webkit-scrollbar { opacity: .5 } </style>`;

    // When scrollbar is not at the top, remove the CSS.
    else
        (document.querySelector("style[data-id=myStyle") || document.createElement("style")).remove()
}, false)

我确定这是否真的可以用于CSS，但我真的想错了。就目前而言，这就是我所拥有的一切。

如何在自定义webkit滚动条按钮时为“禁用”状态提供自定义CSS样式

4 个答案: