是否可以使用 jQuery 选择滚动条等伪元素

Question

是否可以像这样选择伪元素：

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

通过jQuery？

#scroller {
  background: #fff;
  height: 300px;
  width: 400px;
  overflow: hidden;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroller">
  <p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. 
  </p>
</div>

Answer 1

您可以"读取"伪元素的值，但是您无法更改它们，或者我发现了这一点。

尝试设置属性值将返回错误：

无法在"CSSStyleDeclaration"上执行"setProperty"：这些样式是计算的，因此"width"属性是只读的。

var width = window.getComputedStyle(
  document.querySelector('#scroller'), '::-webkit-scrollbar').getPropertyValue('width');
console.log('::-webkit-scrollbar width> ' + width);
$(document).on('click', function() {
  // window.getComputedStyle(document.querySelector('.element'), '::-webkit-scrollbar').setProperty('width', '8px');
  // returns "Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'width' property is read-only."
});

#scroller {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  background: #eee;
}
#scroller::-webkit-scrollbar {
  width: 10px !important;
}

/* Track */
#scroller::-webkit-scrollbar-track {
  background: #eee !important;
}

/* Handle */
#scroller::-webkit-scrollbar-thumb {
  background: #555 !important;
}

/* Handle on hover */
#scroller::-webkit-scrollbar-thumb:hover {
  background: #777 !important;
}
#scroller p {
  height: 800px;
  width: 100%;
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroller">
  <p>
  </p>
</div>