HTML

How to make the scrollbars always visible on iphone (safari) using css

Developing an iPad website I tried to use the CSS property overflow: auto to get the scrollbars if needed in a div, but my device is refusing to show them even if the two fingers scroll is working.,I have done some testing and using CSS3 to redefine the scrollbars works and you get to keep your Overflow:scroll; or Overflow:auto,Unfortunately neither overflow: auto, or scroll, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.,The only down side which I have not yet been able to figure out is how to interact with the scrollbars on iProducts but you can interact with the content to scroll it

Answer by Augustus Warren

Code Block div < max-height: 20rem; overflow-x: hidden; overflow-y: auto; margin-right: 0.25rem; ::-webkit-scrollbar-track < border-radius: 0.125rem; background-color: lightgray; >::-webkit-scrollbar < width: 0.25rem; border-radius: 0.125rem; >::-webkit-scrollbar-thumb < border-radius: 0.125rem; background-color: gray;>; >>

Answer by Rome Leach

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.,Safari 13 Release notes: Indicates the addition of support for one-finger accelerated scrolling to all frames and overflow:scroll elements, eliminating the need to set -webkit-overflow-scrolling: touch.,Use «regular» scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.,Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context.

Answer by Jamie Sanders

/* Hide scrollbar for Chrome, Safari and Opera */ .scrollbar-hidden::-webkit-scrollbar < display: none; >/* Hide scrollbar for IE, Edge add Firefox */ .scrollbar-hidden < -ms-overflow-style: none; scrollbar-width: none; /* Firefox */ >

Answer by Aspyn Sims

What CSS is required to make the browser’s vertical scrollbar remain visible when a user visits a web page (when the page hasn’t enough content to trigger the scrollbar’s activation)?,When page contents is shorter than browser’s visible area (view port) you will still see the vertical scrollbar active, and it will be scrollable only of few pixels.,An alternative approach is to set the width of the html element to 100vw. On many if not most browsers, this negates the effect of scrollbars on the width.,Setting height to 101% is my solution to the problem. You pages will no longer ‘flick’ when switching between ones that exceed the viewport height and ones that do not.

Update: If the above does not work the just using this may.

Answer by Trey Waller

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.,To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x:,Note that overflow: hidden will also remove the functionality of the scrollbar. It is not possible to scroll inside the page.,To hide the scrollbars, but still be able to keep scrolling, you can use the following code:

How To Hide Scrollbars

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

Answer by Rodney Brock

Preferably Hide scrollbars only when if all content is visible else user may skip the content,Avoid horizontal scrolling on Web pages and do not hide horizontal scroll bar as they can make content difficult to read,How to horizontally center a div using CSS?,To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera). There are many other options for the other browsers which are listed below:

Источник

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.

Источник

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.

Источник