safari horizontal scroll

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Safari, ios 14.5: Horizontal scrolling enabled when virtual keyboard apperars on screen.

I have noticed that horizontal scrolling gets enabled whenever the virtual keyboard appears on the screen. This happens although

1) horizontal scrolling has been disabled for the page via CSS.

2) the contents of the page do not exceed the screen size.

Once the virtual keyboard is gone, normal behavior is restored (i.e. horizontal scrolling is disabled).

Why does the appearance of the virtual keyboard result in the horizontal scroll bar being displayed.

Device: iPhone 12 Pro Max.

iPhone 12 Pro Max

Posted on May 30, 2021 3:31 PM

Similar questions

• Safari display issue Safari is regularly, but not always, displaying a page with the left side out of the window. I can reload the page, but this is getting tiresome. On my other devices (iPad and iPhone), there is no obvious way to correct it but to rotate the device into landscape mode. I had expected a fix by now, but there still are no updates. 521 9
• control tab not switching Safari tabs on iPad Air 3 iPadOS 13.7 control tab is moving the screen focus around from screen object to screen object instead of going to the next tab in Safari. Likewise, shift+control+tab does not switch to the previous tab in Safari. 979 3
• ipad magic keyboard unable to scroll by two fingers in certain web pages. As topic mention, two finger scroll don’t always work. For example, if you log into iCloud and go to account settings, you won’t be able to scroll with the trackpad on Magic Keyboard, you need to drag the screen instead. I am quite sure only Apple could fix this, but just in case I’ve missed some settings on my iPad. 1935 1

Loading page content

Page content loaded

May 31, 2021 11:00 AM in response to arao012

Hi arao012,

We appreciate you reaching out to us. Rest assured that we'll do our best to assist you or get you pointed in the right direction.

We understand that you've noticed that horizontal scrolling gets enabled whenever the virtual keyboard appears on the screen, despite the feature being disabled via CSS.

We recommend updating your iPhone if you haven’t. While it isn't inherently assured that an update will resolve the issue, updating to the latest version of iOS for your device can help isolate potential software issues. Kindly secure a backup and update

How to back up your iPhone, iPad, and iPod touch

Update your iPhone, iPad, or iPod touch

Also, we’d like to gather additional details that may help us be in a better position to assist you.

Did you design the website?

Have you had the chance to test other websites that are not designed for horizontal scrolling?

Are you experiencing a similar behavior when using other web browsers?

These details can help us be in a better position to provide you assistance.

Please keep us posted.

A rather geeky/technical weblog, est. 2001, by Bramus

Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)

UPDATE 2017.12 : For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it.

Safari however does not support it …

UPDATE 2021.06 : The workaround below no longer seems to work in recent iOS/MobileSafari versions (iOS 12+) … 😭. Follow Webkit bug #176454 to stay up-to-date on support in Safari.

Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents?

Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart , as the little CSS snippet below can prevent the rubber band scrolling:

Tested with iOS8, iOS9, and iOS10.

However, this snippet disables *all* scrolling on the body . If you want to retain scrolling on your page (but now without the overscroll effect) , you need to make use of a scrollable wrapper that spans the entire window/screen and which wraps around your entire content. Like so:

You’ll most likely want to remove the margin and padding from the body too in that case 😉

Note that your mileage may vary. Other pure CSS solutions do exist (untested though)

🔥 Like what you see? Want to stay in the loop? Here's how:

• Follow @bramus on Twitter
• Follow @bramus on Mastodon
• Follow @bramusblog on Twitter
• Follow bram.us using RSS

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997) , he fell in love with the web and has been tinkering with it ever since (more …) View more posts

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

30 Comments

Not good enough.

Don’t know what you’re talking about this worked fine for me

body, body {} what does it mean, is it a mistake

A mistake indeed. Should’ve been html, body

Worth pointing out that this prevents *any* scrolling when viewed in a browser.

That’s correct. I’ve updated the post to include instructions to using a scrollable wrapper around your content. That way overscroll on the body is prevented, but scrolling of the content is maintained.

Any way to make this work with a site that’s been “Added to Homescreen”?

I can’t seem to find anything :[

This should work fine for a PWA. At least on ios 13 it is working perfect

While this works fine for a web page in a browser, it doesn’t seem to help with a Cordova hybrid app.. When I run my app, it’s almost like the WebView component itself is scrolling as opposed to something within the “html” element. I confirmed this by selecting the “html” element in VS2015’s DOM Inspector and watching the location of the DOM highlight while scrolling.

All the solutions I’ve found end up disabling momentum scrolling completely, which results in another issue where iOS can’t scroll a page if the tap-drag starts on an “input” field.

So, does anybody know of a way to get around this?

Does anyone agree that iOS is absolute garbage for this!!

Now all my absolute elements bounce like hell :))

• Pingback: Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior | Bram.us

thanks a lot. worked perfectly for me

thanks works perfect

i did following this guide but it still have bouncing effect when scrolling to bottom or top viewport ?

• Pingback: Scroll Bouncing On Your Websites - ugurak

this destroys the whole website you dumbass

Not if you know what you are doing … or if you’ve read the entire post …

Thanks, It worked perfectly for me on chat page:)

Because you didn’t give position relative to their father’s elements.

Best answer. it worked for me.

What if content is more than 100vh

• Pingback: 如果使用-webkit-overflow-scrolling，有时div滚动会冻结|ios问答

This works for me, but it creates some scrolling lag (in osx safari at least) sooo…no good 🙁

Thank you so much, it works as expected

This works but since the body is no larger than the screen size, the address bar will not minimise when scrolling down, not important for a lot of people but I’m working on a webapp and I realised this halfway through

It’s a shame we still need to fiddle with non-working workarounds for this in 2021. There is a standard CSS property out there, implemented by actually all other browser vendors but Apple simply refuses to adopt it…

I could not agree more.

Perhaps Apple deliberately keeps Safari in this state so that folks are forced to use Apps on their devices.

Although, Apple is adding support for overscroll-behavior in Safari 16 but this solution works for older Safari versions. Thanks!!!1

I will write my solution, I hope my method will help many people.

Css: html{ overscroll-behavior: none; } body { overflow-y: scroll; }

Leave a comment

Cancel reply.

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

Styling Scrollbars with CSS in Most Modern Browsers

The CSS scrollbar property is not standard.  Chrome, Safari, and Microsoft Edge use the WebKit engine with the -webkit-scrollbar prefix pseudo-element for styling scrollbars.  Firefox also allows styling with a few options, including scrollbar width and color.

Below, we'll talk about how to create custom CSS scrollbars for your website using rules for WebKit browsers, namely Google Chrome and Microsoft Edge.

What is a Scrollbar?

Most websites today include more content than can fit in the client area of a browser window.

A scrollbar is a graphical tool that allows users to navigate web page's contents in their entirety.

There are two types of scrollbars:

• Vertical scrollbars :  Used to navigate up and down on your web page.  This is the most common type of scrollbar used on web pages.
• Horizontal scrollbars :  Used to navigate left and right on your web page.  Not very common unless your pages navigate sideways instead of up and down.  This can be confusing in a lot of cases and doesn't work well for responsive design and mobile user experiences.

Scrollbars can either be controlled by clicking and dragging with your mouse cursor, rotating your mouse wheel, or with the up and down arrows on your keyboard.

Scrollbars are not limited to just the browser's client area.  Tables, div's, and other HTML elements can contain scrollbars for navigation within their content areas, as well!

Styling Scrollbars with CSS

This can be accomplished by using a set of pseudo-elements. There are many combinations of pseudo-elements, selectors, and properties you can define to customize them any way you want.

The best part is it's extremely easy once you get the hang of all the different parts that make up a scrollbar, and you won't have to create any additional HTML code containing scrollbar elements for these CSS rules to work since they're actually part of the browser window, not the web page.

The scrollbars are displayed according to whatever CSS properties you set for them. By default, the browser will show a scrollbar container on the right side of the browser window and will be disabled if the content doesn't stretch past the length of the screen.

Here's a graphical representation of the anatomy of a scrollbar:

Now, let's dive into each of the pseudo-elements and their customization possibilities. As mentioned previously, this will work for Google Chrome and Microsoft Edge browsers.  This will also work in Safari desktop browsers with the -webkit prefix.  We'll discuss Firefox a bit later.

The below code samples will use the same CSS rules from the image you saw above so you can get a clear understanding of how the CSS pseudo-elements and properties tie together visually and written out.

Styling Scrollbars with ::-webkit-scrollbar

The entire scrollbar container. Here, you can determine the width of a vertical scrollbar container and height of a horizontal scrollbar container. You can define both sizes in a single definition:

Styling Scrollbar Buttons with ::-webkit-scrollbar-button

The buttons of the scrollbar. The scrollbar buttons are not shown by default in most modern browsers but are something you can add for extra navigation control. The user can click one of these buttons to move a small amount of pixels up or down the screen.

The buttons were a feature more prominently used in the old days of internet browsing. Scrolling is more easily accomplished with the scroll wheel on your mouse nowadays, but the option is still available for websites that wish to show the extra controls.

You can either configure the buttons to display a single up and down button in the scrollbar: The up button above the scrollbar thumb, and the down button below it:

Or you can customize to have the up and down buttons grouped together, once above the scrollbar track, and once below it:

Additionally, you can add arrows to your scrollbar buttons so users know how to navigate through your content. The below code snippet shows an example of how you can scroll using an up and down button in a vertical scrollbar using simple CSS definitions:

Each of the values in the border-color property represents a side of the button in which you want to show a different color. Square buttons will show a triangular arrow if you specify a color in a single side, like in the code sample above.

Styling Scrollbar Thumbs with ::-webkit-scrollbar-thumb

The draggable scrolling handle. If you click and hold this handle with your mouse cursor, you can drag the scrollbar thumb up and down in a vertical scrollbar, or left and right in a horizontal scrollbar, and the page will scroll with the movement of your mouse. Releasing the mouse button will stop the scroll animation.

Styling Scrollbar Tracks with ::-webkit-scrollbar-track

The track of the scrollbar. This acts as a progress bar, showing how far down, or across, in the web page you are.

In this portion of the scrollbar, we'll simply set the background color so we can differentiate the actual draggable scrollbar node from its background track:

Styling Scrollbar Track Pieces with ::-webkit-scrollbar-track-piece

The part of the track that's not covered by the thumb. I generally set this to the same color as the web page like the code snippet below. But it's your site that you're building, so play around with this and do what's best for your design aesthetic.

Styling Scrollbar Corners with ::-webkit-scrollbar-corner

The bottom-right corner of the scrollbar, where both vertical and horizontal scrollbars meet.

Since I generally don't allow horizontal navigation on any of my websites (I just feel it's bad design practice to do so), I generally hide this from view. But you can also set it to any background color you like:

The Resizer Pseudo-Element: ::-webkit-resizer

The draggable resizing handle that appears in the bottom-right corner of some elements, like textarea elements. The styling for this works similarly to the ::-webkit-scrollbar-corner pseudo-element, so the same example above should work here, as well.

Scrollbar Pseudo-Class Selectors

You can dive deeper into each of the pseudo-elements rules by adding additional pseudo-class selectors. We used a few of these in the examples above, so let's break down each of the options available:

• :horizontal - CSS rules defined in this pseudo-class will apply to any scrollbar features that contain a horizontal orientation.
• :vertical - CSS rules defined in this selector will apply to any scrollbar features that contain a vertical orientation.
• :decrement - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the view's position will be decremented (up on a vertical scrollbar, and left on a horizontal scrollbar).
• :increment - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the view's position will be incremented (down on a vertical scrollbar, and right on a horizontal scrollbar).
• :start - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the objects will be placed before the scrollbar thumb.
• :end - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the objects will be placed after the scrollbar thumb.
• :single-button - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not a single button will appear above and below the scrollbar track. Up and down buttons for vertical scrollbars and left and right buttons for horizontal scrollbars.
• :double-button - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not a group of buttons will appear above and below the scrollbar track. Up and down buttons for vertical scrollbars and left and right buttons for horizontal scrollbars.
• :no-button - This pseudo-class applies to scrollbar track pieces only and indicates whether or not buttons will appear above, below, or next to the scrollbar track, depending on the scrollbar's orientation.
• :corner-present - This pseudo-class indicates whether or not the scrollbar corner will be present.

Styling Scrollbars in Firefox

Firefox doesn't have any advanced styling methods like Google Chrome or Microsoft Edge browsers.  However, you're still able to customize scrollbar width, as well as thumb and track color.

• scrollbar-width : Sets the width of the scrollbar.  The default vault is auto .  You can also set this to thin for a much thinner (almost invisible) scrollbar.
• scrollbar-color : Here, you set two hexadecimal color values.  The first value is the scrollbar thumb color, and the second value is the scrollbar track color.

Here's an example showing the two properties in action.

Note that the properties are wrapped in an html element selector. This is standard for Firefox scrollbar styling. If you want to styling specific elements with a horizontal or vertical overflow, then you can do so by changing the element selector to your liking.

Hiding Scrollbars with CSS

You can also hide a browser window or child container's scrollbars with either of the following CSS rules:

overflow-x hides the horizontal scrollbar and overflow-y hides the vertical scrollbar.

To hide both vertical and horizontal scrollbars within a container with only one line of code, you can use the overflow property:

In this example, you've learned how to style scrollbars using CSS with a variety of different examples broken down into each piece of the scrollbar element.

Experiment and have fun with it! There are a lot of different styling methods you can use for scrollbars with CSS, and playing around with the different pseudo-classes, selectors, properties calls for a whole new level of excitement with CSS.

Daniel Porrey

Add a comment.

How TO - Hide Scrollbar

Learn how to hide scrollbars with CSS.

How To Hide Scrollbars

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.

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

Advertisement

Hide Scrollbars But Keep Functionality

To hide the scrollbars, but still be able to keep scrolling, you can use the following code:

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar. IE and Edge supports the -ms-overflow-style: property, and Firefox supports the scrollbar-width property, which allows us to hide the scrollbar, but keep functionality.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

::-webkit-scrollbar

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The ::-webkit-scrollbar CSS pseudo-element affects the style of an element's scrollbar when it has scrollable overflow.

The scrollbar-color and scrollbar-width standard properties may be used as alternatives for browsers that do not support this pseudo-element and the related ::-webkit-scrollbar-* pseudo-elements (see Browser compatibility ).

Note: If scrollbar-color and scrollbar-width are supported and have any value other than auto set, they will override ::-webkit-scrollbar-* styling. See Adding a fallback for scrollbar styles for more details.

CSS Scrollbar Selectors

You can use the following pseudo-elements to customize various parts of the scrollbar for WebKit browsers:

• ::-webkit-scrollbar — the entire scrollbar.
• ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).
• ::-webkit-scrollbar:horizontal{} — the horizontal scrollbar.
• ::-webkit-scrollbar-thumb — the draggable scrolling handle.
• ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.
• ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
• ::-webkit-scrollbar:vertical{} — the vertical scrollbar.
• ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.
• ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.

Accessibility concerns

Authors should avoid styling scrollbars, as changing the appearance of scrollbars away from the default breaks external consistency which negatively impacts usability. If styling scrollbars, ensure there is enough color contrast and touch targets are at least 44px wide and tall. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 and Understanding WCAG 2.1 : Target Size .

Styling scrollbars using -webkit-scrollbar

Adding a fallback for scrollbar styles.

You can use a @supports at-rule to detect if a browser supports the standard scrollbar-color and scrollbar-width properties, and otherwise use a fallback with ::-webkit-scrollbar-* pseudo-elements. The following example shows how to apply colors to scrollbars using scrollbar-color if supported and ::-webkit-scrollbar-* pseudo-elements if not.

In the example below, you can scroll the bordered box vertically to see the effect of styling the scrollbar.

Specifications

Not part of any standard.

Browser compatibility

Css.selectors.-webkit-scrollbar.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

css.selectors.-webkit-scrollbar-button

Css.selectors.-webkit-scrollbar-thumb, css.selectors.-webkit-scrollbar-track, css.selectors.-webkit-scrollbar-track-piece, css.selectors.-webkit-scrollbar-corner, css.selectors.-webkit-resizer.

• scrollbar-width
• scrollbar-color
• Don't use custom scrollbars (2023)
• Scrollbar styling on developer.chrome.com (2024)
• Styling Scrollbars on WebKit.org (2009)

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Using CSS to hide scrollbars without impacting scrolling

Editor’s note: This article was last updated on 24 October 2023 to address accessibility concerns related to hiding scrollbars and to include visual examples of including, hiding, and conditional hiding scrollbars.

Scrollbars can make an otherwise elegant website look outdated, reminiscent of the 90s. Thanks to new CSS properties, it’s now possible to style and hide scrollbars without impacting the user’s ability to scroll.

The scrollbar in the browser allows the user to scroll up and down on the page without having to take their hands off the keyboard or trackpad. However, for the sake of achieving a more streamlined appearance, certain websites choose to alter, customize, or completely hide the scrollbar, either for the entire webpage or specific elements.

This guide will show you how to hide the scrollbar in popular web browsers by making use of modern CSS techniques. To get the most out of this article, you should have a basic understanding of HTML and CSS.

Reasons to hide the scrollbar

While it’s generally recommended to avoid altering or overriding default browser styles for accessibility reasons, there can be compelling justifications for hiding scrollbars.

Scrollbars appear automatically when web content exceeds the available space within the browser window. This behavior is managed by user-agent styles, which are responsible for the default browser styling.

A scrollbar provides a visual cue for scrolling using a mouse or keyboard, but it’s unnecessary in specific layout patterns, particularly those that don’t require scrolling interactions, such as a slideshow, news tickers, image galleries, etc. In such patterns, hiding the scrollbar can create a smoother interaction and eliminate distractions from the overall feature.

By hiding scrollbars, you can reclaim the space they occupy, adding to your screen’s real estate. This not only streamlines the UI but also allows for a cleaner and more spacious design.

Another common motivation for hiding scrollbars is to enhance the mobile viewing experience. On mobile devices, especially smartphones, users typically expect vertical scrolling, with no need for horizontal movement, as screens are usually tall and narrow, and content flows from top to bottom. Keeping the horizontal scrollbar hidden creates a more natural feel and reduces attention to the technical aspects of browsing.

If you’re wondering how to hide or remove these scrollbars correctly, this tutorial covers everything you should know to accomplish that.

Methods to hide the scrollbar

There are two different methods to hide the scrollbar for a webpage or a specific element within it. The first method involves setting the overflow property to hidden , which effectively hides the scrollbar:

However, this method also takes away the ability to scroll and greatly affects basic accessibility. This is where the scrollbar-specific CSS pseudo-selectors come into play, which we will briefly discuss in the next few sections.

Over 200k developers use LogRocket to create better digital experiences

Essential CSS properties to hide scrollbars

Apart from the overflow CSS property, you primarily need just two more CSS features to manage the appearance of scrollbars:

• -webkit-scrollbar : To target scrollbars in all WebKit-based browsers. It’s worth noting that while this method has been around for a while, it has not yet been standardized and is likely to become obsolete as the new scrollbar properties become universally adopted
• scrollbar-width : To target scrollbars in Gecko-based browsers. This property is part of the new scrollbar properties and is currently supported exclusively in Firefox

Along with these two CSS features, we will employ additional presentational CSS properties to enhance the appearance of the upcoming examples in later sections.

Each browser-rendering engine has its unique approach to managing scrollbar visibility, leading to the use of various vendor-specific CSS pseudo-selectors and properties. Let’s briefly look at them and their usage.

Hiding the scrollbar on Chrome, Edge, and other WebKit-based browsers

You can use the ::-webkit-scrollbar pseudo-selector to hide the scrollbar in Chrome, Edge, Opera, Safari, and other WebKit-based browsers. Obviously, this is currently not the standard way — it’s a vendor-specific selector that is supported by a limited category of browsers.

The -webkit-scrollbar pseudo-selector provides a wide range of options for customizing a scrollbar. You can adjust the appearance of the up and down arrows, modify the scrollbar thumb’s and track’s color, change the background, and more. In this example, we’ll focus on how to hide the scrollbar without affecting the ability to scroll:

See the Pen Hiding the vertical scrollbar by Rahul ( @_rahul ) on CodePen .

As you can see in the above demo, the scrollbar is hidden, but the page remains scrollable using both the mouse and keyboard. Note that this demo covers the hidden scrollbars in Chrome, Edge, and WebKit-based browsers only.

Microsoft web browsers

Browsers developed by Microsoft also support the ::-webkit-scrollbar pseudo-selector for adjusting scrollbar visibility and other appearance properties.

If you prefer not to use the -webkit-scrollbar pseudo-selector, you can use the -ms-overflow-style property to control the scrollbar visibility. Note that this property is specific to Microsoft Edge and Internet Explorer, and won’t function in other browsers:

Gecko-based browsers

For Gecko-based browsers like Firefox, you have the option to use the scrollbar-width property to control the scrollbar visibility. This CSS property is expected to be available in other browser engines soon and may become the standard method for controlling the visibility and width of scrollbars with CSS:

Here’s an implementation using all the pseudo-selectors and properties discussed above, which makes this example functional on all modern web browsers that implement WebKit, Edge, or Gecko rendering engines:

See the Pen Untitled by Rahul ( @_rahul ) on CodePen .

While this approach might appear sophisticated to developers, it doesn’t really offer any visual cues or indications to users regarding the presence of additional content below the current view. This lack of clarity can potentially result in a significant accessibility issue.

Conditionally hiding the scrollbar

If there is a specific section on your website with scrollable content, maintaining a visible scrollbar is advantageous for both usability and accessibility. However, as discussed earlier, a constantly visible scrollbar can compromise the aesthetics of your site’s UI in certain cases.

In such situations, you can make the scrollbar visible only upon hovering. This implies that if the target section is not in use, the scrollbar remains hidden.

Take the following implementation as an example, featuring a vertically scrollable element. The markup part is straightforward and doesn’t directly affect the presentation or functionality of the scrollable element:

In the CSS part, constraining the height of the .scrollable-content div and hiding its overflow establish the foundation for making it truly scrollable. While this may initially result in an unpolished appearance, we can enhance its visual appeal by incorporating additional CSS properties. I’m focusing on the essential CSS properties in the code below:

Now, changing the vertical overflow to scroll upon hover will ensure that the scrollbar appears only when the user intends to use the .scrollable-content section. To provide a seamless user experience, we should extend this functionality beyond just hovering.

By incorporating the :active and :focus pseudo-classes, users can utilize the mouse wheel to scroll up and down the scrollable element:

See the Pen Scrollable Elements w/ CSS by Rahul ( @_rahul ) on CodePen .

As evident in the example above, hovering triggers the appearance of the vertical scrollbar but also introduces a slight text and layout shift within the scrollable element. This occurs because the browser adjusts the scrollable element to accommodate the vertical scrollbar. This adjustment may disrupt the overall visual flow.

To eliminate this shift and achieve a smoother scrollbar appearance, you can integrate the scrollbar-gutter CSS property, which essentially prepares the element for potential layout adjustments caused by scrollbars.

By setting the value to stable , the scrollbar-gutter property will pre-adjust the element only from the edge where the scrollbar is intended to be added. Setting it to stable both-edges will pre-adjust it from both edges to maintain a proportional appearance:

For additional enhancements, you can go the extra mile and stylize the scrollbar using the scrollbar-specific pseudo-elements. Here’s a demo showcasing a scrollable element with a decorated scrollbar without any layout shifts:

See the Pen Smart Scrollable Elements Using CSS by Rahul ( @_rahul ) on CodePen .

Accessibility concerns: Is hiding the scrollbar bad for UX?

Hiding scrollbars in web design has its pros and cons. On the upside, it can make your design look clean and appealing, especially when scrollbars aren’t necessary. This approach maximizes the screen space which is great for mobile users who are accustomed to vertical scrolling and don’t usually need horizontal scrolling. Check out this guide to styling CSS scrollbars for more information .

However, hiding scrollbars on a website can pose accessibility challenges, especially for users who rely on assistive technologies. This includes individuals who use screen readers, those with limited fine motor control, or people with cognitive disabilities. When scrollbars are hidden, these users may struggle to determine if a page is scrollable or to gauge how far they‘ve scrolled.

The decision to hide scrollbars should be made carefully. When done right, it can enhance your design, but it’s crucial to strike a balance between aesthetics and user-friendliness, ensuring that your website remains accessible and usable. Consider providing hints of scrollbars or alternative scrolling methods, such as keyboard commands, or offer users the option to toggle the scrollbar on and off.

Here’s a quick demonstration showcasing both scrollbars hinting and toggling to maintain visibility. The demo implements the previously covered code examples and uses a bit of JavaScript for toggling between two different scrolling functionalities:

See the Pen Smart and Accessible Scrollable Elements w/ CSS by Rahul ( @_rahul ) on CodePen .

As an assignment, you may attempt to toggle the scrollbar visibility using a keyboard shortcut with JavaScript.

Note that hiding or showing scrollbars with CSS won’t significantly impact page load or rendering times. Using CSS to style scrollbars might require a bit more CSS, but it won’t noticeably affect load or rendering times. The same applies to hiding scrollbars with CSS. If you’re using a JavaScript library to manage the scrollbar display, I recommend doing that with CSS to reduce the overall page size and load time.

You now have a good grasp of hiding scrollbars with CSS while maintaining smooth scrolling and accessibility. While hiding scrollbars may be suitable for certain UI and aesthetic considerations, it’s essential to remember that keeping scrollbars visible in scrollable sections helps users easily locate and navigate content, thereby enhancing accessibility.

I hope this article has been helpful to you. See you in the next one.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket .

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Hey there, want to help make our blog better?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Stop guessing about your digital experience with LogRocket

Recent posts:.

Playwright adoption guide: Overview, examples, and alternatives

Playwright has become one of the leading technologies for writing end-to-end tests for modern web apps thanks to its rich and intuitive API.

Exploring JSR for JavaScript module management

JSR is designed to serve as a registry for both JavaScript and TypeScript packages, and an upgrade to the features provided by npm.

Error handling in Rust: A comprehensive tutorial

Learn to handle Rust errors efficiently to write cleaner, more maintainable Rust code and create a more user-friendly application.

Exploring actions and request rewriting in Astro

Astro v4.8 ships with server actions and request rewriting. Let’s see how to use these long-awaited (though still experimental) features.

Leave a Reply Cancel reply

• HTML Tutorial
• HTML Exercises
• HTML Attributes
• Global Attributes
• Event Attributes
• HTML Interview Questions
• DOM Audio/Video
• HTML Examples
• Color Picker
• A to Z Guide
• HTML Formatter

How to Add Horizontal Scroll Bar in HTML Table?

When working with tables that have a lot of columns or when the content inside the cells is too wide to fit within the viewport, it is frequently necessary to add a horizontal scroll bar to an HTML table. This ensures that the table maintains its usability and readability without affecting the webpage’s layout. This article will guide you through the different methods for adding a horizontal scroll bar to HTML tables.

These are the following approaches we can use to add a Horizontal Scroll Bar in the HTML Table:

Table of Content

Using CSS overflow-x Property

Using javascript.

This is the easiest approach to follow. A horizontal scroll bar can be added directly to the table element by setting the overflow-x property to auto or scroll.

Example: This example demonstrates adding a horizontal scroll bar to the table using the CSS overflow-x property.

In some cases, you might need to use JavaScript to adjust the table or container properties to enable horizontal scrolling, especially when dealing with responsive designs.

Example: This example shows how to add a horizontal scroll bar using a combination of CSS and JavaScript.

Please Login to comment...

Similar reads.

• Web Technologies
• HTML-Questions

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Practical CSS Scroll Snapping

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one:

Browser support and basic usage

Browser support for CSS scroll snapping has improved significantly since it was introduced in 2016 , with Google Chrome (69+), Firefox, Edge, and Safari all supporting some version of it.

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Scroll snapping is used by setting the scroll-snap-type property on a container element and the scroll-snap-align property on elements inside it. When the container element is scrolled, it will snap to the child elements you’ve defined. In its most basic form, it looks like this:

This is different to the first version of the spec , which allowed you to set snap-points manually using the repeat keyword:

This method is pretty limited. Since it only allows evenly-spaced snap points, you can’t really build an interface that snaps to different-sized elements. If elements change their shape across different screen sizes, you’re also bound to run into issues.

At the time of this writing, Firefox, Internet Explorer, and Edge support the older version of the spec, while Chrome (69+) and Safari support the newer, element-based method.

You can use both methods alongside each other (if your layout allows it) to support both groups of browsers:

I’d argue a more flexible option is to use the element-based syntax exclusively and loading a polyfill to support browsers that don’t yet support it. This is the method I’m using in the examples below.

Unfortunately, the polyfill doesn’t come with a browser bundle, so it’s a bit tricky to use if you’re not using a build process. The easiest way around this I’ve found is to link to the script on bundle.run and initializing it using cssScrollSnapPolyfill() once the DOM is loaded. It’s also worth pointing out that this polyfill only supports the element-based syntax, not the repeat -method.

Parent container properties

As with any property, it’s a good idea to get familiar with the values they accept. Scroll snap properties are applied to both parent and child elements, with specific values for each. Sort of the same way flexbox and grid do, where the parent becomes a “flex” or “grid” container. In this case, the parent becomes a snap container, if you will.

Here are the properties and values for the parent container and how they work.

scroll-snap-type “mandatory” vs. “proximity”

The mandatory value means the browser has to snap to a snap point whenever the user stops scrolling. The proximity property is less strict—it means the browser may snap to a snap point if it seems appropriate. In my experience, this tends to kick in when you stop scrolling within a few hundred pixels of a snap point.

In my own work, I’ve found that mandatory makes for a more consistent user experience, but it can also be dangerous, as the spec points out . Picture a scenario where an element inside a scrolling container is taller than the viewport:

If that container is set to scroll-snap-type: mandatory , it will always snap either to the top of the element or the top of the one below, making the middle part of the tall element impossible to scroll to.

scroll-padding

By default, content will snap to the very edges of the container. You can change that by setting the scroll-padding property on the container. It follows the same syntax as the regular padding property.

This can be useful if your layout has elements that could get in the way of the content, like a fixed header.

Properties on the children

Now let’s move on over to the properties for child elements.

scroll-snap-align

This lets you specify which part of the element is supposed to snap to the container. It has three possible values: start , center , and end .

These are relative to the scroll direction. If you’re scrolling vertically, start refers to the top edge of the element. If you’re scrolling horizontally, it refers to the left edge. center and end follow the same principle. You can set a different value for each scroll direction separated by a space.

scroll-snap-stop “normal” vs. “always”

By default, scroll snapping only kicks in when the user stops scrolling, meaning they can skip over several snap points before coming to a stop.

You can change this by setting scroll-snap-stop: always on any child element. This forces the scroll container to stop on that element before the user can continue to scroll.

At the time of this writing, no browser supports scroll-snap-stop natively, though there is a tracking bug for Chrome.

Let’s look at some examples of scroll snap in use.

Example 1: Vertical list

To make a vertical list snap to each list element only takes a few lines of CSS. First, we tell the container to snap along its vertical axis:

Then, we define the snap points. Here, we’re specifying that the top of each list element is going to be a snap point:

Example 2: Horizontal slider

To make a horizontal slider, we tell the container to snap along its x-axis. We’re also using scroll-padding to make sure the child elements snap to the center of the container.

Then, we tell the container which points to snap to. To center the gallery, we define the center point of each element as a snap point.

Example 3: Vertical full screen

We can set the snap points directly on the element:

Then, we make each section the size of the viewport and define the top edge as a snap point:

Example 4: Horizontal full screen

This is the same sort of concept as the vertical version, but with the snap point on the x-axis instead.

Example 5: 2D image grid

Scroll snapping can work in two directions at the same time. Again, we can set scroll-snap-type directly on the element:

Then, we define the top-left corner of each tile as a snap point:

Some thoughts on user experience

Messing with scrolling is risky business. Since it’s such a fundamental part of interacting with the web, changing it in any way can feel jarring—the term scrolljacking used to get thrown around to describe that sort of experience.

The great thing about CSS-based scroll snapping is that you’re not taking direct control over the scroll position. Instead, you’re just giving the browser a list of positions to snap in a way that is appropriate to the platform, input method, and user preferences. This means a scrolling interface you build is going to feel just like the native interface (i.e using the same animations, etc.) on whatever platform it’s viewed on.

To me, this is the key advantage of CSS scroll snapping over JavaScript libraries that offer similar functionality.

This works fairly well in my experience, especially on mobile. Maybe this is because scroll snapping is already part of the native UI on mobile platforms. (Picture the home screens on iOS and Android—they’re essentially horizontal sliders with snap points.) The interaction on Chrome on Android is particularly nice because it feels like regular scrolling, but the viewport always happens to come to a stop at a snap point:

There’s definitely some fancy maths going on to make this happen. Thanks to CSS scroll snapping, we’re getting it for free.

Of course, we shouldn’t start throwing snap points onto everything. Things like article pages do just fine without them. But I think they can be a nice enhancement in the right situation—image galleries, slideshows seem like good candidates, but maybe there’s potential beyond that.

If done thoughtfully, scroll snapping can be a useful design tool. CSS snap points allow you to hook into the browser’s native scrolling interaction, so your interface feel seamless and smooth. With a JavaScript API potentially on the horizon , these are going to become even more powerful. Still, a light touch is probably the way to go.

User experience for this on mobile is still pretty bad. Playing with the demos above had plenty of unexpected behavior, such as not being able to scroll past some elements and jumping to seemingly arbitrary points. Where it does work, it’s kinda neat.

Demos don’t work in Safari iOS 11.3.

WebKit prefixes should fix this.

@Brant No they don’t. Safari 11 should support it unprefixed. Older versions used prefixes.

It looks like Safari just seems to support Scroll Snap, but it really doesn’t. I really couldn’t manage to make the demos work, couldn’t even be able to make an un-polyfilled demo to work. No problem in Chrome or desktop Safari.

This works in Opera to since quite a few versions back :-)

Thanks for writing this. With support finally coming to Chrome, it’s feasible that we can start using this now.

I was hoping someone would write a blog post about how to achieve x-browser scroll-snap support and now it exists.

It might feel differently on a mobile device, but trying out the demos on my laptop made me really mad. It doesn’t feel natural at all and I had trouble to navigate to the point I wanted. If would have such an experience on a live website, I wouldn’t visit that site ever again. So I guess your warning there is pretty important. If you mess with people’s scrolling, you should be a 100% sure about what your’re doing. Very interesting article though.

The technology is very interresting, and when well applied, can be useful to the user. But so far, such scroll-jacking is a nightmare usability. You may apply, but never remove the control of the user.

Support is not yet good enough yet. Your picture shows Chrome 69 support, but as of Aug 2018, v 69 has only 0.04% usage. Chrome 67 has 23% worldwide usage, but has no scroll snap support

I was playing with the Example 4: Horizontal Full Screen in Codepen on Firefox 60.2.0esr and it works great, but when I paste all the code to a html file it no longer works. What else do you need?

There's a way to stop videos from automatically playing on your computer. Here's how

Question: Is there a way to keep websites from automatically blaring their advertising videos?

Answer: It’s amazing how many websites think that irritating their visitors with an automatically played video is a good idea.  Most people searching the web are looking for text;  if they sought video, they’d use YouTube instead.

If you’re one of those publishers causing this irritation, you might rethink your strategy as research shows that it adds to cognitive load and distracts the user from their intended task, which can lead to them moving on to another resource.

The start of the video can often be delayed, which can make it hard to figure out which open tab is the source of the irritation since most of us have many open all the time.

The quickest way to identify which tab is causing the racket is by looking for a small speaker icon on the tab which indicates that sound is being generated by that site.

You can’t stop the video from playing, but you can stop the sound from blaring by changing the setting.

On your Desktop, click on the three vertical dots in the upper right corner, then click on Settings -> Privacy and Security -> Site Settings and look for the ‘Content’ section.

Scroll down and click on ‘Additional permissions’ then on Sound and change it from ‘Sites can play sound’ to ‘Don’t allow sites to play sound’.

If there are websites that you want as exceptions, you can add them under ‘Customized behaviors’.

For Android mobile users, go to Settings then look in the ‘Advanced’ section for ‘Site settings’; scroll down to the Content section and tap Sound.

Tap the slider icon so that it says ‘Mute sites that play sound’ and add site exceptions if you want them.

iOS users of the Chrome app can’t change a universal setting because of Apple’s imposed limitations on apps.

Deepfake videos: With elections and more coming in 2024, here's how to spot them

MacOS users using Safari can go to Settings, then click on Websites, and then on Auto-Play in the list on the left.

This is where you can decide to block all or selected websites from automatically playing videos.

Microsoft’s default browser can be changed by clicking on the three horizonal dots in the upper right corner, then Settings to open the menu.

Click on the three horizontal lines to the left of the word Settings, then click on ‘Cookies and Site permissions’. Scroll down and click on ‘Media autoplay’ to access a menu that allows you to Limit or Block all audio and video playback.

You can also add websites that are your chosen exceptions if you would like them to autoplay content.

Too many emails? Google just made it easier to unsubscribe

As with most of the other browsers, click on the three horizontal lines, then on ‘Settings’ and look for ‘Privacy & Security’.  In the ‘Permissions’ section, look for the ‘Settings’ button to the right of ‘Autoplay’.

You can then choose to Block Audio only or Block Audio and Video as well as add exceptions to this rule.

The Opera browser is based on Google’s Chromium open-source code, so the process will be the same as Chrome.

To revisit this article, visit My Profile, then View saved stories .

• The Big Story
• Newsletters
• Steven Levy's Plaintext Column
• WIRED Classics from the Archive
• WIRED Insider
• WIRED Consulting

How to Take a Long, Scrolling Screenshot on Android, iOS, and Desktop

When you quickly need to capture something on your phone’s display—a high score, a meme, an address— a screenshot is often the best way to do it. By default though, you'll only get what's showing on the display at that moment, so any part of a webpage or document that isn't shown won't be captured.

You can modify this behavior on both Android and iOS with the built-in screenshot tools, giving you what's known as a long screenshot or a scrolling screenshot. It's not quite as easy to do on Windows and macOS , but there are ways of doing it, as we'll explain here.

Scrolling Screenshots on Android

Tap Capture more at the bottom of the screen to extend a screenshot on a Pixel phone.

If you're using a Pixel phone, the screenshot button combination is Power+Volume Down: Press these two buttons together and a screenshot will be taken, with a small thumbnail of the captured image showing up in the lower left corner.

If you're looking at something that stretches off the screen—so primarily webpages, but also documents or conversation threads in messaging apps—the thumbnail will be accompanied by a Capture more button.

Tap this button to take a scrolling screenshot: You'll see a preview of the entire webpage (or document, or whatever it is) appear, and you can then adjust the handles around the edges to determine how much of it you want to save. To capture everything, drag the handles to the very top and very bottom. Tap Save , and the long screenshot is saved to your gallery, just like a standard screenshot.

Different Android devices work in slightly different ways, so some trial and error may be required. On Samsung Galaxy phones, again it's the Power+Volume Down button combination, but this time—as long as you're looking at content that extends beyond the screen borders—you'll see two small, downward-pointing arrows just to the right of the thumbnail that pops up.

Tap and hold on these arrows, and the screenshot will extend farther down the screen. When you lift your finger, or the bottom of the webpage or document is reached, the image is saved to your phone's gallery.

Scrolling Screenshots on iOS

Use the Full page tab near the top to take a long screenshot.

You can capture scrolling screenshots on iOS too. The standard button shortcut combination for a screen capture is Power+Volume Up if your iPhone has Face ID or Power+Home if your iPhone has Touch ID.

That takes care of a standard screenshot, but if you want a scrolling one, you need to tap on the thumbnail that pops up in the lower left corner. The next screen will show the capture, and if there's content that stretches beyond the display (like a webpage or long document), you'll be able to switch between Screen and Full Page views.

On the Full Page view, the entirety of the webpage or document is selected by default. If you want to change this, tap the crop icon—just to the right of the Done button at the top—and then use the handles to change what's included in the screengrab. Tap Done to confirm your crop selection.

When you're happy with what's been captured, tap Done , and you're then able to save the capture as a photo to your gallery or as a PDF to the Files app. You can also choose to delete the screengrab or copy it to the clipboard.

Scrolling Screenshots on Windows and macOS

Microsoft Edge will capture scrolling screenshots for you.

Scrolling screenshots aren't supported by the default capture tools in either Windows or macOS, but you do have options if you need to grab a lengthy webpage or document in your desktop operating system.

One is to choose the print option in whatever program you're using: Both Windows and macOS offer a print to PDF option in the printers list, even if there are no actual printers attached. Choose this, and the entirety of whatever you've got open will be saved as a PDF in a folder of your choosing.

When it comes to webpages, some browsers have scrolling screenshot capabilities built in. Chrome and Safari don't, but Microsoft Edge does: Click the three dots (top right), then Screenshot , then Capture Full Page . You can do it in Firefox too: Right-click on the page, choose Take Screenshot , then pick Save full page .

A variety of third-party options will take scrolling screenshots for you to, usually by stitching together several screen captures: ShareX is a free option for Windows that does this, and on macOS you can use Shottr (it costs $8, but you can try it for free for 30 days).

You Might Also Like …

Scoop : Joe Biden's campaign team were told he was leaving the race in an email telling them to check X

J.D. Vance left his Venmo public. Here's what it shows

If you were affected by the Crowdstrike outage, don't fall for these scams

Navigate election season with our WIRED Politics Lab newsletter and podcast

She made $10,000 a month defrauding apps like Uber and Instacart. Meet the queen of the rideshare mafia

Give your back a break: Here are the best office chairs we’ve tested

WIRED COUPONS

Save $7 To $23 On Turbo Tax Online

20% Off All H&R Block 2024 Tax Software | H&R Block Coupon

Enjoy $15 Off Your Orders With Instacart Coupon

50% Off $12+ DoorDash Coupon Code - Up to $10 Off

Up To 50% Off Nike Shoes And More

Groupon Coupon: Extra 15% Off Any Size Order