Css no scrollbars on div

How to Make Scrollbar Visible Only when Necessary

As we know, scrollbars are commonly visible, even in the cases when there isn’t an overflowing text. But what if there is a need to make the scrollbars visible only when necessary?

On this page, you can find some examples of making the scrollbar on the element visible only when necessary by using the CSS overflow, overflow-y, and overflow-x properties.

Create HTML

div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. div>

Add CSS

• Set the overflow property to “auto”. This value adds scrollbar when the content overflows.
• Set the width and height of the .

div < overflow: auto; width: 150px; height: 150px; >

Let’s see the result of our code.

Example of adding a scrollbar on the using the overflow property:

html> html> head> title>Title of the document title> style> div < overflow: auto; width: 150px; height: 150px; border: 1px solid grey; > style> head> body> div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. div> body> html>

Result

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.

We can also add the scrollbar on the element only vertically or horizontally. For that, we need to use the overflow-y or overflow-x property and set it to “auto” as in the previous example.

Example of adding a scrollbar on the using the overflow-y property:

html> html> head> title>Title of the document title> style> div < overflow-y: auto; width: 300px; height: 100px; border: 1px solid #2b00ff; > style> head> body> div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. div> body> html>

To scroll only horizontally, we need to use the overflow-x property as we mentioned above and set the width and border properties. Also, we add a element inside the tag and then add style to it in the CSS section.

Example of adding a scrollbar on the using the overflow-x property:

html> html> head> title>Title of the document title> style> div < overflow-x: auto; width: 300px; border: 1px solid #2b00ff; > p < width: 350px; padding: 10px 30px; > style> head> body> div> p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. p> div> body> html>

Another Approach:

You can make the scrollbar visible only when necessary by using the ::-webkit-scrollbar pseudo-element in CSS. Here’s an example:

html> html> head> title>Title of the document title> style> body < overflow-y: auto; /* Enable vertical scrolling */ width: 250px; > /* Hide scrollbar by default */ ::-webkit-scrollbar < width: 0.5em; background-color: #f5f5f5; > /* Make scrollbar visible when needed */ ::-webkit-scrollbar-thumb < background-color: #000000; > /* Make scrollbar track visible when needed */ ::-webkit-scrollbar-track < background-color: #f5f5f5; > style> head> body> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print. p> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print. p> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print. p> body> html>

In this example, we have set the overflow-y property to auto on the body element to enable vertical scrolling when necessary.

Next, we’ve used the ::-webkit-scrollbar pseudo-element to style the scrollbar. By default, we’ve set the width of the scrollbar to 0.5em and given it a light gray background color. This makes the scrollbar appear hidden when it’s not needed.

When the content exceeds the height of the container and scrolling is required, the scrollbar will automatically appear. We’ve used the ::-webkit-scrollbar-thumb pseudo-element to style the appearance of the scrollbar thumb (the part of the scrollbar that is dragged up and down). We’ve given it a black background color to make it visible when needed.

Finally, we’ve used the ::-webkit-scrollbar-track pseudo-element to style the scrollbar track (the area that the thumb moves along). We’ve given it the same light gray background color as the default scrollbar to make it visible when the thumb is dragged up and down.

Note that the ::-webkit-scrollbar pseudo-element is a non-standard feature and is only supported in webkit-based browsers such as Google Chrome and Safari. Other browsers may use different pseudo-elements or methods to style scrollbars.

Источник

Use CSS to hide the scrollbar

There are times when we need to hide the scrollbar from the HTMl elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User Experience(UX). Most of the time, I don’t like to show the scrollbar to the user because of design practices I follow. To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser’s stylings Let’s see the default UI for scroll elements which will show the scrollbar. We will declare a div which will contain a list of items and then we will apply some CSS to provide max-width and max-height to see the scroll behaviour.

  class="scroll-show">  Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value   

.scroll-show ul  max-height: 100px; max-width: 200px; overflow: auto; border: 2px solid #f3f3f3; padding-left: 16px; > 

Let’s see how it look in the screen You see, browser automatically adds the scrollbar by default, but If we want to hide, we can do it. Now, we will add some css to the element to hide the scrollbar: We will declare a div with some other class name which will contain same number of items and then we will use the same CSS but with some extra rules to see the scroll behaviour but not see the scrollbar.

  class="scroll-hide">  Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value   

.scroll-hide ul  max-height: 100px; max-width: 200px; border: 2px solid #f3f3f3; padding-left: 16px; overflow: auto; /* this will hide the scrollbar in mozilla based browsers */ overflow: -moz-scrollbars-none; scrollbar-width: none; /* this will hide the scrollbar in internet explorers */ -ms-overflow-style: none; > /* this will hide the scrollbar in webkit based browsers - safari, chrome, etc */ .scroll-hide ul::-webkit-scrollbar  width: 0 !important; display: none; > 

Let’s see, whether we achieved what we wanted or not Here, you can see that, the scrollbar is no longer can be seen, but the functionality for scrolling remain intact. Hope this helps you someway. Do comment your thoughts on anything, you would like to change or add.

Источник