javascript - 是否可以使用 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

您可以“读取”伪元素的值，但是您不能更改它们，或者我发现是这样。

尝试设置属性值返回错误:

Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'width' property is read-only.

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>