safari horizontal scroll

Design Corral

IOS Safari – How To Disable Overscroll But Allow Scrollable Divs To Scroll Normally?

As a Mac user, you might have noticed extensions cluttering your Safari browser. They can be useful, but sometimes they aren’t used as often and become more of a burden. Fear not! Disabling or removing extensions from Safari is a breeze. Here’s how:

First, open Safari and click on the Safari menu on the top left corner of your screen. Select “Preferences” and then click on “Extensions” on the top toolbar. Here, you’ll see all the installed extensions on your browser. To disable an extension, uncheck the box next to its name. If you want to remove an extension entirely, click the “Uninstall” button. And voila! No more pesky extensions.

But wait, there’s more! Did you know you can disable scrolling on your iPad Safari? It’s true! Here’s how to do it:

First, open Safari on your iPad and type “apple.com” in the search bar. Next, click on the search bar, and you’ll see a box with the text “apple.com” and a downward arrow to the right. Click on the arrow, and a drop-down menu will appear. Select “Settings for This Website” and you’ll see a variety of toggles. Slide the switch next to “Allow Scrolling” to the left to disable scrolling on that particular website.

But what about iframes that are vertically scrollable and responsive in both iOS and desktop browsers? Fear not, developers! Here’s how to achieve this:

First, insert the iframe into your HTML code with the proper dimensions and source. Then, to allow vertical scrolling, add “scrolling=’yes'” within the iframe tag. To make it responsive, add the following CSS code:

“` iframe width: 100%; height: 0; padding-bottom: (height/width)*100%; overflow: hidden;

iframe iframe position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 0; overflow: auto;

This will allow the iframe to resize proportionally based on the screen size and allow for scrolling within the iframe on iOS and desktop browsers.

But what about horizontal overscroll on iOS with phonegap or not? Is there a way to disable it? You bet there is! Here’s how:

First, add the following CSS code to your webpage:

“` html,body overflow-x: hidden;

This will disable horizontal scrolling on your webpage on all devices, including iOS. But what if you want to keep vertical scrolling enabled? No problem! Simply add the “overflow-y: auto” property to your CSS code to allow vertical scrolling.

And there you have it, folks! Handy tips and tricks for your Safari browser and web development needs. Happy browsing and coding!

Leave a Comment Cancel reply

Save my name, email, and website in this browser for the next time I comment.

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

Guide to styling CSS scrollbars

The default browser scrollbar works fine in most cases. However, leaving it as is can make even the most beautiful websites look incomplete and unpolished. By styling the scrollbar, you can create a more visually appealing site that better aligns with your brand or design. In this tutorial, we’ll explore a few different ways to style CSS scrollbars.

Jump ahead:

Introduction to scrollbars

Styling scrollbars in chrome, edge, and safari, scrollbar pseudo-class selectors, styling scrollbars in firefox, styling scrollbars for more cross-browser support.

The scrollbar is a frequently overlooked element in web design. While it may seem like a small detail, it plays an essential role in website navigation. The default scrollbar is often dull and might look out of place, detracting from the overall aesthetics. Fortunately, you can easily customize the scrollbar using CSS. To do so, you’ll need to write two sets of CSS rules to cover Webkit browsers, like Chrome, Edge, Safari, and Firefox .

Before diving into the code, let’s make sure we understand the structure of a scrollbar. Knowing this is helpful when styling it with CSS because you can use different properties to target specific parts of the scrollbar. Below are the elements that make up a scrollbar:

• Thumb: The movable part of the scrollbar that represents the current position of the content. It can be clicked and dragged to scroll the content up or down
• Track: The area of the scrollbar that the thumb moves along. It represents the entire length of the content
• Arrow buttons: Located at the top and bottom of the scrollbar track, the arrow buttons can be clicked to scroll the content
• Scrollbar borders: The lines that surround the scrollbar element
• Scrollbar corner: The intersection between the vertical and horizontal scrollbars when both are present

Webkit browsers allow scrollbar styling using pseudo-elements like :: -webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track , and more. Each of these targets different parts of the scrollbar, as listed above. The CodePen below shows an example of a styled scrollbar using the pseudo-elements above:

See the Pen webkit scrollbar style by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

In the code above, we’ve displayed both the vertical and horizontal scrollbars, but in most cases, we’d only display one. To do so, we can modify the overflow property, which is responsible for the visibility of the scrollbar, to either overflow-x or overflow-y , depending on which axis we will display the scrollbar. However, for the example above, this wouldn’t be enough unless we make the image responsive by setting its width and height to 100% .

To create a more customized design, you can target specific elements of a scrollbar and apply styles to them by adding a pseudo-class to each pseudo-element . Below are some of the most common pseudo-classes:

• :horizontal : Used to style the horizontal scrollbar differently from the vertical scrollbar. For example, you can set a different width or color for the horizontal scrollbar
• :vertical : Used to style the vertical scrollbar differently from the horizontal scrollbar
• :decrement : Applies to the arrow buttons at the beginning of the scrollbar. It is used to style the decrement button or the up arrow for a vertical scrollbar and the left arrow for a horizontal scrollbar
• :increment : Applies to the arrow button at the end of the scrollbar. It is used to style the increment button or the down arrow for a vertical scrollbar and the right arrow for a horizontal scrollbar
• :start : Applies to the first buttons and first track piece of the scrollbar, which are at the top or left side of a vertical or horizontal scrollbar, respectively
• :end : Applies to the last track piece of the scrollbar, which are at the bottom or right side of a vertical or horizontal scrollbar, respectively

Below is an example that uses all the pseudo-classes above except :horizontal to give the vertical scrollbar a different look:

See the Pen webkit scrollbar vertical pseudo-class by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

The example below uses the :horizontal pseudo-class to insert a shadow onto the horizontal scrollbar’s track:

See the Pen webkit scrollbar horizontal pseudo-class by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

While the Webkit specifications for styling a scrollbar work fine at the time of writing, W3C has officially abandoned this specification and it is expected to be phased out gradually.

Firefox doesn’t offer any advanced styling methods like the Webkit browsers. At the time of writing, only scrollbar-width and scrollbar-color are available, which is the standard as specified by W3C CSS Scrollbars . These properties can be used to style a scrollbar’s width, thumb, and track color:

When styling a scrollbar, combining the Webkit and W3C CSS Scrollbars specifications is recommended to cover more browsers:

In WebKit browsers, rules that aren’t recognized will be ignored, and the browsers will apply the -webkit-scrollbar rules. On the other hand, in Firefox browsers, rules that aren’t recognized will be ignored as well, and the browsers will apply the CSS scrollbars rules. Therefore, the scrollbar will retain its styling in more browsers. Although the downside is that there are no advanced styling methods in Firebox like in Webkit, you might be able to style the scrollbars to look exactly the same.

Styling a scrollbar makes a site look more polished. It can also help differentiate a brand or product by incorporating its color scheme or logo into the scrollbar design. However, it is recommended not to style your scrollbar too far from its original look and feel so as not to make it unfamiliar to users and reduce the user experience. I hope you enjoyed this article, and be sure to leave a comment if you have any questions. Happy coding!

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)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Integrating Django templates with React for dynamic webpages

Create a dynamic demo blog site using Django and React to demonstrate Django’s server-side functionalities and React’s interactive UI.

Using aoi.js to build a bot on Discord

Explore how the aoi.js library makes it easy to create Discord bots with useful functionalities for frontend applications.

Web Components adoption guide: Overview, examples, and alternatives

Evaluate Web Components, a set of standards that allow you to create custom HTML tags for more reusable, manageable code.

Using AWS Lambda and CloudFront to optimize image handling

Leverage services like AWS Lambda, CloudFront, and S3 to handle images more effectively, optimizing performance and providing a better UX.

Leave a Reply Cancel reply

Pure CSS Horizontal Scrolling

The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site!

I’d be nice if we could do something like this:

Unfortunately, that’s not going to happen. It’s not even on the roadmap for CSS.

That’s too bad, as at the company I work for this would be quite useful. We do quite a few web presentations. Presentations are a very horizontal thing – usually slides have a 4:3 or 16:9 radius. This means we always have a struggle between the horizontality of presentations and the verticality of web technologies. And by we, I mean me. But if there’s one thing I like, it’s a challenge.

Another Use Case

The specific use case that led to me digging into this idea that a customer wanted to show all their products on a single slide. Of course, their product catalog was way too big to put in a single view. So we decided to split them up into three categories, each horizontally scrollable. So the three most prominent product in each category were visible and less important products were still easily accessible.

A Non-JavaScript Way

There are, no surprise, numerous ways to do this in JavaScript. Some of them are on this very site .

I was curious if it was possible to do in pure CSS. The solution ended up being fairly straightforward:

• Create a container with items
• Rotate the container 90 degrees counterclockwise so the bottom is to the right
• Rotate the items back to correct-side up

Step 1) Set up the container

Make a <div> , and make a bunch of child elements.

In this example, our side-scrolling container will be 300px wide, with 8 items of 100×100px each. These are arbitrary sizes; they could be anything.

The height of the container will become the “width” and vice-versa. So below, the “width” of our container will be 300px:

Now the children:

Step 2) Rotating the container

Now we rotate the container -90 degrees with a CSS transform . And there you have it: a horizontal scroller.

There’s just one tiny issue: our children have rotated too, and now anything within is on its side.

Step 3) Rotate the children back upright

How would we go about getting the children upright again? Rotate them back using another, opposite CSS transform .

Step 4) Fixing the positioning

It’s starting to look alright, but there are still some issues.

By rotating the wrapper using the top right as an anchor point, our left side has shifted by the width of the container. If you find this difficult to understand, just put your finger on the top right corner of a page and rotate it. The solution: shift it back with translateY .

Better. But the first item is still missing, due to the same phenomenon happening to the items. We could fix this by giving the first child a top margin of its width or by translating all items the same way we did the wrapper. The easiest way I’ve found though is to add a top padding to the wrapper equal to the item width, creating a kind of buffer for the items.

See the Pen Horizontal scroll (simple example) by Pieter Biesemans ( @pieter-biesemans ) on CodePen .

Here’s another where you can see non-square children:

See the Pen Horizontal scroll (extensive example) by Pieter Biesemans ( @pieter-biesemans ) on CodePen .

Compatibility

I have tested on the devices immediately available to me.

Since the styling of scrollbars is currently only supported by WebKit/Blink, Firefox and IE still show the ugly gray ones. You could sniff this out with JavaScript and hide them completely, but that’s stuff for another tutorial.

Using the mouse scroll wheel works great on desktops. My laptop was a different matter, though. Both the touchscreen and the touchpad acted as though the div was not rotated.

I was kind of surprised to find that Android actually understood that the container had been rotated, and let you scroll sideways by swiping left and right.

iOS on the other hand did not play nice. It acted like the container did not get rotated, so you have to swipe up and down to scroll sideways, which of course is counterintuitive. Also, swiping left and right moves the items up and down in their wrapper, which is unexpected and weird. Setting the overflow to hidden does not alleviate this issue.

According to Can I Use, CSS transforms are currently supported by over 93% of users (at the time of this writing, November 2016), so there’s no issue there.

Beware of using this in production, though. I have tested this on some devices, but not at all extensively or in depth.

The greatest issue is with touch inputs that requiring you to swipe up and down to go left and right. A possible solution would be to include a message on your site explaining this, but you’d have to rely on people actually reading your message. And even then it’d still be counterintuitive. Another possible solution would be to capture the touch input with JavaScript on those devices, but then you’d be better off just doing the whole thing in JavaScript and foregoing this CSS hack completely.

That’s a technique I haven’t heard of before. But even after reading the article twice I’m not quite sure what specific problem you’re trying to solve with it. Why not just use actual native horizontal scrolling, for example by preventing line breaks with white-space: nowrap and using inline-block items? That’s much, much simpler in terms of necessary layout trickery and works on any device regardless of input type.

Are you jumping through all these hoops just to make scroll wheels scroll horizontally?

I was about to write a similar reply. I would stick with overflow-x: scroll as the demos seem a little odd to have to scroll down to go right.

Interesting to see another way to solve a problem though :)

The entire point is to get native scrolling to go sideways instead of up and down. It’s weird. It’s a trick.

Yes, exactly that. And because I can.

So it doesn’t work on iOS, behaves like overflow-x: scroll on Android, and makes vertical scrolling scroll horizontally on (some) desktops, because, well, why not, it’s a trick!

Fair enough. I tend to think that making the vertical scroll wheel scroll horizontally is just as bad as the touch device issue you pointed out in your article (making vertical swiping scroll left and right), because really, both have the same issue of subverting user expectations.

As a user, if you want to natively scroll horizontally on a non-touch device, you can hold Shift while rolling the scroll wheel. Of course close to 0 users know about this, so as a developer I’d assist them by providing navigation buttons and a scroll bar, not by messing with CSS layout in terrible ways and screwing up native scrolling for people on touch devices. ;)

Anyway, I get it – it’s a hack.

Or we could just use flexbox without wrapping. I did this recently for http://xoroshe.pl on the main banner.

Oh, I didn’t get the point of this, sorry.

You can go far away and use css multicol too (so, we don’t need calc or know the width): https://escss.blogspot.com/2015/03/mouse-wheel-down-scroll-right.html

This is a CSS trick I cannot advocate using. The downside is too steep. Clever idea, though. Thanks, Pieter.

Hey, no prob. I never said you have to use it anyway. I wouldn’t use this in production either.

It doesn’t seem to play nice in Chrome Desktop with pen/tablet input (which is my main pointing device). It forces the scroll motion to be vertical, whereas with the default browser scroll the horizontal scrolling works perfectly.

Indeed. It behaves much the same on my touch screen laptop. That’s why I wouldn’t use this in production. But hey, the point of the exercise was just to see if I could hack it :)

Accessability is an issue as well. You probably need another mechanism for scrolling left/right for people who can’t use a mouse (or even a mouse wheel).

But it’s a great example of thinking outside the box. I myself have created a site that uses a horizontally-scrolling area; and I did it using css columns. This might be more straightforwards.

Accessibility is definitely an issue, most input devices will choke on this. I was rather surprised that Android didn’t.

I would not call this more straightforward then using columns, on the contrary. It’s more an exercise to see if I could rather than if I should .

I don’t know about you, but for every article that I read, I read the intro paragraph to get the gist of the article and this one is VERY clear on the purpose of the article. the purpose is to use this as a presentation tool starter kit for showing slides.

I think is cool the way Pieter developed the solution using just CSS as there are environments where even javascript is not EVEN allowed.

Great Pieter and thanks for sharing.

You’re welcome lcr. I hope you enjoyed it and it inspired you to dare experiment and hack things.

Why not just overflow-x: auto ?

Mouse wheel not supported.

Hi Jens, the whole point was to make the scroll wheel do something it usually doesn’t do: scroll right. It’s a CSS trick or hack if you will that you can normally only achieve with Javascript.

I made the same exercice on a Codepen ~6 months ago, and the few browsers tested led me to the same conclusions: too much different behaviours to trust browsers for this particular case.

Hi Mehdi, I knew I couldn’t have been the first to think about something so simple. Thanks for sharing.

I had exactly this problem a few days ago and managed to do it with a bit of hacky use of white-space:nowrap;

What i got: https://jsfiddle.net/mzvaan/590grzuy/

Hi Matej, that’s what i usually do. The whole point of this exercise was to make a sidescroller that could be scrolled using the mouse wheel though. But it’s hacky and doesn’t behave very well on touch devices and such, so for now we’re stuck with white-space: nowrap .

Hm, they done it much simpler in the top menu @ medium.com . They use white-space: nowrap, overflow-x: auto; on the parent and letter-spacing:0; on the children, then they apply the proper letter spacing inside the children.

Hi Chris, that’s what i usually do in production. The whole point of this exercise was to make a sidescroller that could be scrolled using the mouse wheel though. But it’s hacky and doesn’t behave very well on touch devices and such, so for now we’re stuck with white-space: nowrap.

Here I put a simple demo that is working on desktop and mobile:

http://codepen.io/bassta/pen/gLXWKm

Probably some indicator that scrolling is possible is needed

@Chris Panayotov the idea is to scroll right via mouse scroll wheel

Ah, but that would require scrolling in a way that’s natural to the platform , like using shift + scroll-wheel, or dragging your finger in a direction that matches the scrolling. Who wants to do that?

This article fixes this obvious problem by allowing you to scroll horizontally using your vertical scroll-wheel without shift , on some platforms, but not Android, or iOS, or laptops with touchscreens. But you can definitely do it on platforms that you can shift + scroll-wheel anyways, so you save an entire button press.

I’m curious, how does this site do it?

It acted like the container did not get rotated, so you have to swipe up and down to scroll sideways, which of course is counterintuitive.

Is scrolling up and down to scroll sideways intuitive?

The whole point of this exercise was to recreate this demo in CSS only: https://css-tricks.com/examples/HorzScrolling/

But granted, scrolling down with the mousewheel to go sideways isn’t very intuitive either.

4:3 or 16:9 radius

aspect ratio*

Correct. Well spotted.

I just closed a website that had horizontal scrolling (linked from css-tricks no less). Because it had horizontal scrolling.

If you’re trying to transfer this offline, paper concept to the online world, you probably took the wrong turn somewhere along the way. No use case you describe here gets better results from horizontal scrolling.

The internet is no book and your browser is no magazine. Work with and for the medium, not against it.

Step back, and read https://en.wikipedia.org/wiki/Form_follows_function .

I understand and hear what you are saying.

But be careful not to fly to close to dogmatism: https://css-tricks.com/increasing-wariness-dogmatism/

I have encountered an issue with rotating in iOS, and it seems like iOS ignores rotation if it is a multiple of 90, if you change it to 89.9, it should work. Hope this helps

Comment from Cleber Santana, after the buzzer:

I see a lot of people complaining about Pieter hacking on a basic function (the scrolling behavior). But I always try not to judge experiments as they usually drive the evolution of the medium, and I have an example that proves his approach may fit sometimes. http://demo.koken.me/#boulevard Its a photography portfolio layout, and the use of a horizontal layout makes sense, as both vertical and horizontal photos fit well when laid out horizontally on a desktop screen (on a mobile screen, it falls back to a vertical layout). The inverted scrolling behavior helps desktop users to navigate. It feels a little awkward at the beginning, but it’s easy to get past the feeling.

A take on this concept, via Jari Thorup Palo:

I added a media query which detects if the used unit has support for hover. If no support is found, the items are placed inline instead of using translate. The main goal is to support native scroll for touch devices. The old version forces users to scroll vertically while the site actually scrolls horizontally. If a mobile user visits the old solution it would be confusing for them to scroll on the page.

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, table of contents.

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 .

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.

Scrolling in Safari not working

Safari version 16.3 (18614.4.6.1.6) on macOS 13.2.1

After a few posts here on the Apple Support Communities - and only here, alas - it becomes impossible to scroll using Safari to the bottom of pages where fellow users have replied with more than about half a dozen posts.

The page loads, scrolls itself to the last/most recent post and then skips to the top.

The scroll bars become inactive and I have to use FireFox .

Is that a known bug, please?

iMac 27″, macOS 10.14

Posted on Feb 26, 2023 5:06 PM

Similar questions

• Safari scrolling problem (Ventura 13.3.1) I have problems with scrolling in Safari since the last update. When I use the down arrow scrolling cannot be stopped. This behavior does not occur with other browsers. I'm using a M1 2020 MacBook Air. 4283 17
• Safari unusably choppy scrolling after upgrade to macOS 12.1 Hi, Ever since I upgraded to macOS 12.1, Safari (15.2) is basically unusuable. It often takes anywhere between half a second and a full second until scrolling has any effect, regardless of whether I use the mouse or the keyboard. I don't use any extensions. CPU and memory usage is normal. I tried deleting all history and site data to no avail. It doesn't seem to matter what site I'm on. Has anyone seen this and found a solution? 728 2
• Safari scrolling is not smooth When browsing websites (any website) on Safari, the scrolling with trackpad / mouse / scrollbar is not smooth. There is a noticeable stutter. This does not happen when using Chrome, where the scrolling is buttery smooth. Is this normal behaviour, or is there something that can be done to fix this? I am running Safari 14.0.2, on Big Sur 11.1 (latest update), on a MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) with Intel Core i7 Quad-Core. This problem has been persistent through multiple versions of Safari and OS. 771 2

Loading page content

Page content loaded

Feb 28, 2023 3:35 PM in response to Vilas_S

Thank you, Vilas_S , for your suggestions.

I can confirm that I have tried each and all of these.

I should also point out again, please, that this only happens here on the Apple Support Communities pages, and no other site at all!

And only with Safari . Firefox works perfectly every time.

The failure-to-allow-scrolling-bug only appears when there are several replies … this page, for instance, the page we are on now, has scroll bars occupying almost three fifths of the vertical space of this open window.

But I can guarantee that if a few more people reply, so that I need to scroll further, I shall be prevented from scrolling and the scroll bar will become inoperative.

A Private Window is the only way I can view down to the bottom of such pages.

I believe this needs to be escalated to the engineers working with Safari (16.3 (18614.4.6.1.6) on macOS 13.2.1). Thanks!

Feb 28, 2023 3:22 PM in response to Mark Sealey

Hello Mark Sealey,

Thank you for using Apple Support Communities. We'd like to help out and recommend some troubleshooting steps you can try. Let's start off by following the steps listed here: If Safari on Mac doesn't open a webpage or isn’t working as expected - Apple Support

1.) Reload the page.

2.) Check Safari extensions .

3.) Check Safari settings by going to Safari > Settings. Review Privacy , Website and Security settings .

4.) Test with a private window .

5.) Check VPN or other security software .

Another step we recommend you try is to test this issue in safe mode. This step can help isolate possible software related issues: How to use safe mode on your Mac - Apple Support

Apple silicon

1.) Shut down your Mac.

2.) Turn on your Mac and continue to press and hold the power button until you see the startup options window.

3.) Select your startup disk, then press and hold the Shift key while clicking “Continue in Safe Mode.”

4.) Log in to your Mac. You might be asked to log in again.

Intel processor

1.) Turn on or restart your Mac, then immediately press and hold the Shift key as your Mac starts up.

2.) Release the key when you see the login window, then log in to your Mac. 

3.) You might be asked to log in again. On either the first or second login window, you should see ”Safe Boot” in the upper-right corner of the window.

Depending on your results, follow the steps under “If the issue continues in safe mode” or “If the issue doesn't continue in safe mode”.

Feel free to keep us posted on your results. Thank you for using Apple Support Communities.

Feb 28, 2023 3:46 PM in response to Mark Sealey

Hi Mark Sealey,

If you have been able to follow all provided steps with this behavior continuing, it would be best to contact Apple to have them investigate this for a solution.

Contact - Official Apple Support

Feb 28, 2023 4:47 PM in response to ASTRO24

Will do. Thanks.

Prevent scrolling horizontal before ScrollTrigger

By oldskool123 December 7, 2020 in GSAP

Recommended Posts

Oldskool123.

Hi guys! I'm new here at GSAP and love it but been struggling with the horizontal scroll a bit in Safari. Couldn't find the right forum for my problem so I'll try here instead. When scrolling sideways in the first and last container I want to prevent/ disable the scroll, and only make it possible to scroll horizontal when the user is in the middle container. I think it's because of the width in the middle container but how can I solve it? The problem is in all screen sizes and want it responsive. Seems to be working in Chrome but not Safari.

Thanks in advance! Cheers from Sweden

See the Pen qBaNRgq by oldskool123 ( @oldskool123 ) on CodePen

Link to comment

Share on other sites.

ZachSaucier

Hey oldskool123 and welcome to the GreenSock forums. Very peculiar bug! It definitely seems like something is going wrong in Safari. I am able to prevent the horizontal scrolling in Safari by applying 

However, this seems to completely break scrolling once the container is pinned! We'll investigate to see if we can work around this bug somehow.

Nah, I'm pretty sure that's not a bug with ScrollTrigger or anything - it's just some quirks in the way various browsers handle overflow and whether they scroll on the body or html element. This seemed to work for me: 

And @ZachSaucier , the reason vertical scrolling stopped when you just applied overflow-x: hidden to the html element had to do with the fact that when the super-wide element was pinned (and thus position: fixed), it was  obscuring the scrollbar on the <body>. Pretty weird, I know. But the goal of the CSS above is to make the html element be the one that's scrolling instead of the <body> so that position: fixed is incorporated into that rather than sitting on top of the <body> scroller. Does that make sense (sorta)? 

This may be helpful:  https://teamtreehouse.com/community/overflow-hidden-not-working-in-ios-safari

14 hours ago, GreenSock said: us browsers handl

Thanks you guys! I tried it but then the horizontal scroll stopped. Or I can scroll the first section but then it stops?  Does it happen for you guys also? 

You removed the CSS that you had before. Can you please add it back?

See the Pen mdrrbyo by oldskool123 ( @oldskool123 ) on CodePen

That's because you've got CSS styles from the linked CodePen contaminating things - it has body { height: 100% } but it shouldn't. Just make that height: auto. 

See the Pen bbfdab3b579f7a73639a7dc6a66cd67b?editors=0100 by GreenSock ( @GreenSock ) on CodePen

Wow, missed that one haha... 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Already have an account? Sign in here.

Recently Browsing    0 members

• No registered users viewing this page.
• Existing user? Sign In
• Leaderboard
• Create New...