2

I need the design of the scroll bar in mobile and tablet mode (better design), to activate in all desktop Browser monitor.

The scroll bar in desktop mode makes the design ugly.

Can be done?

No plugin please

This is my css code:

aside {
    overflow: hidden auto;
    height: 80vh;
}

Scrollbar Design, Mode Tablet, Mode Desktop Looks

In image, Browser load scrollbar light-nice design, when detect user-agent its tablet or mobile.

I need the scroll bar to load when I am at all times. No need javascript or css, because the browser changes it according to the device. Let me understand?

Note: Sorry my english is poor.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Renato Ramos Puma
  • 399
  • 3
  • 13
  • i don't get what you are missing, you already have that navbar or you want to create one like that? – Alberto Sinigaglia Jun 21 '20 at 20:04
  • Without JavaScript, you can only make custom scrollbars with -webkit, meaning that only specific browsers support it. Does this answer your question? [How to create a custom scrollbar on a div (Facebook style)](https://stackoverflow.com/questions/9945547/how-to-create-a-custom-scrollbar-on-a-div-facebook-style) – Vepth Jun 21 '20 at 20:08
  • @Berto99 in tablet and mobile, the scrollbar light mode its default, that design I want it to load on desktop monitor. (Browser load Scrollbar Light Design default for tablet and mobile screen). – Renato Ramos Puma Jun 21 '20 at 20:21

1 Answers1

4

use ::-webkit-scrollbar in CSS
This is not supported in Firefox, Try SmoothScrollbarJs for firefox

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

directly copied from w3schools

mynamejeff
  • 56
  • 2
  • 2
    Your answer is fine, but ... The browsers have two scroll bars to display, for desktop monitors and for tablets and phones (as I put in the image). I want the desktop to use the scroll bar as if I were using it from a tablet or phone (the design is more elegant and fine). Can be done? You don't need CSS or Javascript to do it. The browser detects the user-agent to use a classic scrollbar or lightweight design. That was my question, but I couldn't find an answer to that. Any ideas? – Renato Ramos Puma Jun 21 '20 at 21:33
  • 3
    @RenatoRamosPuma Each browser has its own way of rendering the scrollbar, some use the operating system's scroll bars(like in firefox and most mobile browsers) some render it on their own(Chrome). So, it is not an html thing that you can edit, but a browser thing. So unless you implement your own scrolling system (like when you use a javascript plugin like smooth-scrollbar) you cannot make it look the same on a desktop browser and a mobile browser. – mynamejeff Jun 21 '20 at 22:53
  • @RenatoRamosPuma beware that this solution is only supported by browsers that use `-webkit`, as mynamefeff said. If you would want only to modify scrollbar to look same like in some phone, you would need to use `@media (min-width: )` to specify when to change it. Also note that default scrollbar would differ from phone to phone so you can't guarantee same UI for every user. – Vepth Jun 25 '20 at 16:56