html ::-webkit-scrollbar 未通过 jquery 应用

Question

我可以隐藏 Chrome 中的滚动条：

# app.css loaded in <head>
html ::-webkit-scrollbar {
  display: none;
}

现在我想手动隐藏滚动条，所以我尝试运行以下 jQuery:

$("html ::-webkit-scrollbar").css("display", "none")

但是，滚动条在滚动过程中保持可见。

如何手动hide/show滚动条？

Answer 1

根据这个答案：webkit scrollbar using jQuery.css() method 你不能使用 JQuery 来处理伪元素，但你可以使用 class 到 'hack' 它：

$('html').addClass('hide-scrolling')

.hide-scrolling::-webkit-scrollbar {
       width: 30px;
}

<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

html ::-webkit-scrollbar 未通过 jquery 应用

html ::-webkit-scrollbar not applied via jquery

css

jquery

scrollbar

css-selectors

pseudo-element