Display scrollbar after using webkit-scrollbar{ display: none }

Question

In my project, we have a common css file and in which, we use webkit-scrollbar{ display: none } to hide scroll bar in chrome, but in some page, we need to display scroll bar in chrome. I have tried some way I have found on internet. Ex: display: block, initial ,... or all : unset, but it doesn't work. Anyone have any idea for this problem ? Thanks

related to this one https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll — Najme, Jan 16 '22 at 09:54
@NajmiehSadatSafarabadi : It doesn't related to the topic you have mentioned, I need to override webkit-scrollbar{ display: none } in chrome to display scrollbar, not to hide scroll bar like your topic you have mentioned above — QUANG Tuấn Vũ, Jan 16 '22 at 10:03

Kundan · Answer 1 · 2022-01-17T02:38:32.343

0

Try using ::-webkit-scrollbar { visibility: visible; } on those pages where you want the scroll to appear.

edited Jan 17 '22 at 02:38

answered Jan 16 '22 at 09:56

Kundan

1,363
13
31

Thank, but it doesn't work – QUANG Tuấn Vũ Jan 16 '22 at 10:07
@QUANGTuấnVũ I've updated the answer, please have a look – Kundan Jan 17 '22 at 02:38

score 0 · Answer 2 · answered Jan 16 '22 at 10:21

If you want to turn on scrollbar on some pages, then you should add an id to those pages in html, and then address them with the overflow-y: scroll, like so:

#page-or-page-section-you-want-to-make-the-scrollbar-visible{
overflow-y: scroll;
}

<body id="page-or-page-section-you-want-to-make-the-scrollbar-visible">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed viverra tellus in hac habitasse platea. Donec ac odio tempor orci dapibus ultrices. Molestie nunc non blandit massa enim nec dui nunc mattis. Pellentesque sit amet porttitor eget dolor. Sit amet nisl suscipit adipiscing. Fermentum odio eu feugiat pretium. Tellus in metus vulputate eu scelerisque. Tempor id eu nisl nunc mi ipsum faucibus vitae. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Laoreet sit amet cursus sit amet dictum sit amet justo. Lacus vestibulum sed arcu non odio euismod. Sed velit dignissim sodales ut eu sem integer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed viverra tellus in hac habitasse platea. Donec ac odio tempor orci dapibus ultrices. Molestie nunc non blandit massa enim nec dui nunc mattis. Pellentesque sit amet porttitor eget dolor. Sit amet nisl suscipit adipiscing. Fermentum odio eu feugiat pretium. Tellus in metus vulputate eu scelerisque. Tempor id eu nisl nunc mi ipsum faucibus vitae. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Laoreet sit amet cursus sit amet dictum sit amet justo. Lacus vestibulum sed arcu non odio euismod. Sed velit dignissim sodales ut eu sem integer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed viverra tellus in hac habitasse platea. Donec ac odio tempor orci dapibus ultrices. Molestie nunc non blandit massa enim nec dui nunc mattis. Pellentesque sit amet porttitor eget dolor. Sit amet nisl suscipit adipiscing. Fermentum odio eu feugiat pretium. Tellus in metus vulputate eu scelerisque. Tempor id eu nisl nunc mi ipsum faucibus vitae. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Laoreet sit amet cursus sit amet dictum sit amet justo. Lacus vestibulum sed arcu non odio euismod. Sed velit dignissim sodales ut eu sem integer.
</body>

Display scrollbar after using webkit-scrollbar{ display: none }

2 Answers2