HTML

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.

Источник

How TO — Always Show Scrollbars

Add overflow: scroll; to show both the horizontal and vertical scrollbar:

Example

To only show the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x :

Example

body <
overflow-y: scroll; /* Show vertical scrollbar */
overflow-x: scroll; /* Show horizontal scrollbar */
>

Tip: To learn more about the overflow property, go to our CSS Overflow Tutorial or CSS overflow Property Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to always show scrollbars with CSS?

The Scrollbars are used to scroll through the contents of the webpage which are larger than the available display area. The scrollbar is used to provide horizontal and vertical scrolling.

The scrollbar is usually added only for large content which does not fit the display. But we can also show scrollbar in spite of content size.

In this tutorial, we will learn to always show scrollbars with CSS

Always show scrollbars

To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage.

To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.

Example: Always show scrollbar with CSS

In this example, we have used overflow: scroll to show scrollbar vertically as well as horizontally.

     body  
Always show scrollbar
  

Output

Here is the output of the above example.

Example: Show only vertical scrollbar

In this example, we will only show vertical scroll using CSS overflow-y: scroll property.

Example: Show only horizontal scrollbar

In this example, we will only show horizontal scrollbar using CSS overflow-x: scroll property.

Conclusion

In this tutorial, we have learned to always force the scrollbar to show. It can be done using overflow property. We can choose the option to show both horizontal and vertical scrollbars or only one scrollbar. All three situations are shown with examples.

Источник

Как всегда показывать вертикальную полосу прокрутки в браузере?

Я хочу всегда показывать вертикальную полосу прокрутки на моей веб-странице. Можно ли использовать javascript? Я думаю, что можно использовать javascript или jQuery. Я хочу вертикальную полосу прокрутки, есть ли контент для показа или нет. спасибо.

7 ответов

jQuery не требуется. Вы можете попробовать добавить CSS:

Это работает в последних браузерах, даже в IE6.

Я думаю, что это будет отображать полосу прокрутки только тогда, когда есть переполнение. Чтобы отобразить полосу прокрутки, всегда попробуйте body

Вы ошиблись в этом раунде. Если вы установили переполнение: авто, то полосы прокрутки будут отображаться при необходимости. Переполнение: прокрутка всегда показывает полосы прокрутки. Если содержимое недостаточно длинное, полосы прокрутки отображаются серым цветом.

Если я хочу, чтобы только два элемента отображались в HTML, выберите и все еще хотите вертикальную полосу прокрутки, затем overflow-y: scroll; не работает.

Это работает для меня, но я также должен был добавить !important Important, чтобы используемые мной модальности Bootstrap не скрывали полосу прокрутки.

Я использую последнюю версию Chrome и Safari, и у меня она тоже не работает. Полоса прокрутки появляется только после того, как я пытаюсь прокрутить, чтобы увидеть больше контента. Ничто из того, что я делаю, не имеет значения.

Только примечание: В OS X Lion переполнение, установленное на «прокрутку», ведет себя как авто в том, что полосы прокрутки будут отображаться только при использовании. Они исчезнут, когда они не используются. Поэтому, если какие-либо решения выше не работают, возможно, поэтому.

Вот что вам нужно исправить:

::-webkit-scrollbar < -webkit-appearance: none; width: 7px; >::-webkit-scrollbar-thumb

Вы можете настроить его соответствующим образом.

Источник