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

6jjcrrmo  于 2023-05-19  发布在  其他
关注(0)|答案(5)|浏览(125)

当滚动条滑块一直指向箭头时,普通的chrome滚动条箭头按钮会处于类似禁用的状态。
::-webkit-scrollbar*选择器用于样式化滚动条。
我可以使用什么选择器来样式化按钮的特定状态?::webkit-scrollbar-button:disabled不适用于此状态。
Codepen:https://codepen.io/mattyork/pen/oGWOZY?editors=1100

tquggr8v

tquggr8v1#

如果没有什么可滚动的,我会完全隐藏滚动条。

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

kcrjzv8t2#

回答

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

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

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

wj8zmpe1

wj8zmpe13#

你可以使用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>

希望这对你有帮助。

yxyvkwin

yxyvkwin4#

我只能想到用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中是可能的,但我真的希望在这一点上是错误的。目前我只有这些

ulydmbyx

ulydmbyx5#

您可以尝试在::-webkit-scrollbar之前使用:disabled,如下例所示:

:disabled ::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-position-y: -34px !important;
}

:disabled ::-webkit-scrollbar-button:single-button:vertical:increment {
    background-position-y: -34px !important;
}

:disabled ::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-position-y: -34px !important;
}

:disabled ::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-position-y: -34px !important;
}

它适用于我的情况,background-position-y对应于禁用状态的图像位置。

相关问题