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

【问题标题】：html ::-webkit-scrollbar not applied via jqueryhtml ::-webkit-scrollbar 未通过 jquery 应用
【发布时间】：2020-05-29 16:33:57
【问题描述】：

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

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

现在我想手动隐藏滚动条，所以我尝试用 jQuery 运行以下命令：

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

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

如何手动隐藏/显示滚动条？

【问题讨论】：

这能回答你的问题吗？ webkit scrollbar using jQuery.css() method
感谢分享。看起来没有办法直接使用 jquery 处理伪元素。建议的解决方案$('html').addClass('hide-scrolling')（改编自答案）对我不起作用。滚动条保持可见。这是它应该如何工作的？
请用工作示例检查我的答案

标签： jquery css css-selectors scrollbar pseudo-element

【解决方案1】：

根据这个答案：webkit scrollbar using jQuery.css() method 你不能使用 JQuery 处理伪元素，但你可以使用一个类来“破解”它：

$('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>

【讨论】：