html ::-webkit-scrollbar not applied via jquery

Question

I can hide the scrollbar in Chrome with:

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

Now I want to manually hide the scrollbar, so I try to run the following with jQuery:

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

However, the scrollbar stays visible during scrolling.

How can I manually hide/show the scrollbar?

Does this answer your question? webkit scrollbar using jQuery.css() method — johannchopin
– johannchopin, Commented Feb 13, 2020 at 21:39
Thanks for sharing. Looks like there is no way to work with pseudo-elements directly with jquery. The proposed solution $('html').addClass('hide-scrolling') (adapted from answer) doesn't work for me though. Scrollbar stays visible. Is this how it's supposed to work? — mattes
– mattes, Commented Feb 13, 2020 at 21:56

johannchopin · Accepted Answer · 2020-02-13 22:05:11Z

1

According to this answer: webkit scrollbar using jQuery.css() method you can't work with pseudo-elements using JQuery but you can use a class to 'hack' it:

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

answered Feb 13, 2020 at 22:05

johannchopin

15k11 gold badges64 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

html ::-webkit-scrollbar not applied via jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related