safari disable scroll bar

How to hide the browser scrollbar using CSS

by Nathan Sebhastian

Posted on Aug 21, 2021

Reading time: 2 minutes

The browser scrollbar can be hidden from view by applying the CSS property overflow:hidden to the body tag.

For example, suppose you have a long <div> that’s scrollable as follows:

You can hide the scrollbar from the browser by adding the overflow:hidden property to the body tag as shown below:

Now the scrollbar will be hidden from view, but you won’t be able to scroll the browser content either.

If you want to hide the scrollbar and still enable scrolling, then you need to apply a CSS styling to the specific browser you want to affect.

To hide the scrollbar from Chrome, Safari, Edge, and Opera, you can use the pseudo-element selector :-webkit-scrollbar and set the display property to none .

Here’s the CSS syntax:

To hide the scrollbar from Firefox, you need to add the scrollbar-width:none property to the html tag as follows:

Applying the CSS above to the body tag used to work on older Firefox versions, but now you need to apply the style to the html tag.

Still, if you have a container <div> with a maximum height or width property, you can apply the scrollbar-width:none property to the container element to hide the scrollbar only in that container:

Here’s an example:

Finally, if you need to support Internet Explorer, then you need to add the -ms-overflow-style:none property to the container:

And that’s how you can hide the browser scrollbar using CSS.

Take your skills to the next level ⚡️

I'm sending out an occasional email with the latest tutorials on programming, web development, and statistics. Drop your email in the box below and I'll send new stuff straight into your inbox!

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials. Learn statistics, JavaScript and other programming languages using clear examples written for people.

Learn more about this website

Connect with me on Twitter

Or LinkedIn

Type the keyword below and hit enter

Click to see all tutorials tagged with:

How To Prevent Scrolling The Page On iOS Safari 15

If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use preventDefault() on the "touchmove" event but on iOS 15 that no longer works. Here we go.

To make this work we need iOS to think that there is nothing to scroll.

But how do we do this?

We set the height of both the html and the body element to the window height and then set overflow on these elements to hidden so the content gets cut off.

For now it’s set to 100px .

A height of 100vh

A vh is a viewport height unit, 1vh means 1% of the viewport height.

Great. Let’s set the measure to 100vh and observe what happens.

Nope. This is not going to work. On iOS 100vh is always the full height of the viewport, even if the footer shows.

If you’re browsing this page on iOS Safari, scroll up and down a bit to see the height stays fixed no matter of the footer is active or not.

Using -webkit-fill-available

Let’s try the -webkit-fill-available property instead.

This is a -webkit- thing, so if you’re on Firefox the measure will now snap to 0

This will do the trick. But it results in a modal that is not filling up all available space.

-webkit-fill-available will fill the “safe” space, so it excludes the room the footer will take up if it’s active.

We want all the space.

It turns out that window.innerHeight reflects the actual available space. So what we want is this.

But you and I both know that this won’t fly because window.innerHeight is a JavaScript property.

Syncing window.innerHeight

Luckily we can use CSS Custom Properties to make this tick.

Now we switch to JavaScript land where we update the custom property when the window is resized.

The 'resize' event is trigged when the iOS Safari footer changes in height, so this nicely aligns our measure with the page height.

I know we could also “just” set measure.style.height but as we’re going to use Custom Properties for our modal in a minute so we might as well go the extra mile here.

If you’re on iOS, see if the measure scales correctly by scrolling up and down a bit.

We’re almost out of the woods. Our measure is now be the right size no matter if the iOS Safari footer is visible or not.

Now we’re going to apply this height to the html and body elements when our modal is activated. This prevents the page from scrolling.

We’ll add an is-locked class to our html element when we show the modal.

When the is-locked class is assigned we use it to set the required styles so the page cannot be scrolled.

Wait a minute, what is that calc() doing there?!

Let me try to explain. If the iOS Safari footer is hidden when the modal opens, iOS will reveal the footer if the user makes a vertical pan gesture, the 1px prevents this from happening.

I don’t know why, I just know that I’m so tired. 🤷‍♂️

Let’s just move on.

Now we listen for the 'resize' event to keep the --window-inner-height CSS Custom Property synced with the window.innerHeight in JavaScript land.

To prevent iOS from hiding the footer when the modal is visible and the footer is visible we need to prevent the default action of the 'pointermove' event.

If we want to support iOS 14 we need to add 'touchmove' as well.

We’re nearly done. 🫠

Because we’re resizing the document the user scroll position is lost when the modal opens. So we need to remember that position before it opens and restore it when the modal closes.

There we go! 😅

Try it out on iOS Safari 15 by clicking the “Open modal” button below. It’s been tested with the address bar at the bottom of the viewport (which is the default) and at the top. We can move it to the top by tapping “aA” and then “Show Top Address Bar”.

The modal is slightly transparent on purpose so we can see that the page is scrolled to the top. We can assign the backdrop-filter: blur(20px) style to the modal root element to make this less obvious.

I sincerely hope the Apple Safari dev team will fix this mess in the next upate, but I’m not holding my breath.

I share web dev tips on Twitter, if you found this interesting and want to learn more, follow me there

Or join my newsletter

Busy doing the newsletter subscribing.

Something went wrong, can you give it another go?

At PQINA I design and build highly polished web components.

Make sure to check out FilePond a free file upload component, and Pintura an image editor that works on every device.

Typescript interface merging and extending modules, blocking navigation gestures on ios safari, styling password fields to get better dots.

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.

Using CSS To Hide Scrollbars Without Impacting Scrolling

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 .

Stop guessing about your digital experience with LogRocket

Building web-based terminal components with Termino.js

Explore Termino.js, an open source library for integrating web-based terminals into applications, in this introduction article.

How to build a custom GPT: Step-by-step tutorial

Let’s see why and how to build custom GPTs — personalized versions of ChatGPT that act as custom chatbots to serve a specific purpose.

Jest adoption guide: Overview, examples, and alternatives

Jest is feature-rich testing framework that comes with several in-built features that make it powerful and easy to use.

Implementing LiveViews in Node.js

Explore LiveViewJS and how to build a full-stack Node.js app with LiveViews that supports real-time interactivity.

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 .

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

Report Error

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

[email protected]

Struggling with internal tools?

Explore refine’s limitless possibilities in crafting CRUD apps, CRM solutions, HR dashboards, and more!

How to Hide Scrollbar Using CSS?

Introduction .

A scrollbar is a GUI element that appears on the right side (or bottom corner) of a webpage or web application to let users navigate a page or an element up and down (and also left and right) without taking their hands off the keyboard or trackpad. However, the default scrollbar may appear bland and out of place, diminishing the overall aesthetics of the webpage or web application.

With the help of new CSS attributes, scrollbars can now be styled and hidden without affecting the user's ability to scroll. In this article, we will demonstrate how to hide the scrollbar in most web browsers using CSS .

Steps we'll cover:

CSS properties to hide element scrollbars.
Hide scrollbars on specific elements.
CSS properties to hide browser scrollbars.
Hide scrollbars in Webkit browsers like Chrome, Safari, Edge, and Firefox.

CSS properties to hide element scrollbars

The CSS property overflow: hidden is used to hide the vertical and horizontal scrollbar on an element. However, This property also affects the element's ability to scroll on its vertical and horizontal axis.
The CSS property overflow-y: hidden is used to hide the vertical scrollbar on an element. This property also affects the element's ability to scroll on its vertical axis.
The CSS property overflow-x: hidden is used to hide the horizontal scrollbar on an element. This property also affects the element's ability to scroll on its horizontal axis.
A pseudo selector ::-webkit-scrollbar , which is only supported for webkit browsers. In the pseudo selector, you can define the display: none property which would hide the scrollbar on the element but retain its scrolling function.
The -ms-overflow-style: none property which is only supported for for Edge and other legacy browsers like IE.
The scrollbar-width: none property which is supported by Firefox.

Hide scrollbars on specific elements

We will demonstrate how to hide scrollbars using the CSS attributes mentioned earlier.

Below is a codepen example that shows how to hide an element's scrollbar without affecting its ability to scroll.

In this example, we used the ::-webkit-scrollbar pseudo-selector to hide the scrollbar on the element with a class scroll-container while maintaining its functionality.

Another example is using the property overflow: hidden to hide the scrollbar. However, as shown on the codepen, it affects the element's ability to scroll.

The overflow: hidden property is applied on the element with class scroll-container with a max-height: 350px .

CSS properties to hide browser scrollbars

The pseudo selector -webkit-scrollbar can also be used to target browser scrollbars in all WebKit-based browsers. However, while this method has been around for a while, it has yet to be standardized and is likely to become outdated once the new scrollbar characteristics provided by MDN are fully implemented and supported in all browsers.

The browser's scrollbar can be hidden when the CSS properties overflow: hidden , overflow-y: hidden , or overflow-x: hidden are added to the body element (the root element). Nonetheless, it is not recommended to apply them to the base body element since it may interfere with the browser's ability to scroll on that page.

Hide scrollbars in Webkit browsers like Chrome, Safari, Edge, and Firefo

We will demonstrate how to hide browser scrollbars using the CSS properties mentioned earlier.

The codepen example that follows demonstrates how to conceal the browser's scrollbar without impairing its scrolling functionality.

In this example, we used the ::-webkit-scrollbar pseudo-selector to hide the scrollbar on the body element while maintaining its functionality.

Another option is to conceal the scrollbar by using the CSS property: overflow: hidden . Nevertheless, it has an impact on the browser's scrolling capability (which is not advisable) on that page, as seen on the codepen.

The overflow: hidden property is applied to the body element.

Conclusion

In this article, we explained how to hide scrollbars at the element and page levels using CSS. Scrollbars should be hidden for certain UI and aesthetic reasons, but it's crucial to remember that accessibility is improved when scrollbars are displayed in scrollable sections because they make it easier for users to find and navigate content.

In this post, we see how to use Heroicons with TailwindCSS.

In this brief guide, we compare some concept of the two most popular CSS layout methods - Grid and Flexbox.

In this brief guide, we'll create a responsive navbar with Tailwind CSS and Bootstrap in React.

Introduction
CSS properties to hide element scrollbars
Hide scrollbars on specific elements
CSS properties to hide browser scrollbars
Hide scrollbars in Webkit browsers like Chrome, Safari, Edge, and Firefo

Home » Tech Tips » Mac » How to Show or Hide Scroll Bars in Mac?

How to Show or Hide Scroll Bars in Mac?

Sometimes the new user interface design concepts make us sick. On the name of UI design companies remove the handy features used by people for many years. Scroll bars are shown vertically and horizontally if the visible content exceeds the width of the app’s display window. When you read long document or webpage, it helps to know the position where you are and estimate the remaining length of the content. For most of us, it works like looking at the remaining pages when you are reading a book. Long back Apple removed, the fixed scroll bars and shows them when you move the mouse or based on trackpad gestures. In this article let us discuss how to bring the scroll bars in Mac permanently back and few other customizing options for you to make it easy.

Related: How to show desktop in Mac?

Bring Missing Scroll Bars in Mac

If you are not seeing the scroll bar on Safari, Pages or any other app then simply move the mouse or cursor using trackpad. This will make the scroll bar visible. However, this is not convenient as it may disappear before you may catch to drag it to the required position. The solution is simple; you need to make it visible permanently.

Scroll Bar Options in macOS 12 or Earlier

Since the settings are different in macOS 13 (Ventura) or later, first we explain with older macOS versions (12 or earlier).

Click on “Apple menu” and go to “System Preferences…” section.

Click on “General” preferences option.

You will have three options under “Show scroll bars”.

Automatically based on mouse or trackpad

This is a tricky option to understand. It can be better understand with and without an external mouse connected to your Mac. First enable this and open any default app like Preview or Safari or Pages showing a lengthy document. You will NOT see any scrollbar unless you move the cursor up or down using trackpad movement.

Now plugin your mouse using a cable or USB and check the document. You will permanently see the scroll bars. You can move the bars either using mouse or using trackpad, arrow keys or spacebar.

So enabling automatic option will basically show the scroll bars when you have a mouse plugged. And toggle the scroll bar based on trackpad movement when you have no external mouse.

When scrolling

This option does the same function as previous option without external mouse. That means, you will see the scroll bars only when you move the cursor up or down using double finger swipe.

This is a good option, in our opinion, to bring the scroll bar permanently back regardless of you have external mouse or not. Choose this option to work smoothly with your documents.

Related: How to manage desktop in Mac?

Scroll Bar Movement

Simply enabling scroll bar is not sufficient in most cases. Generally you may expect the content to move to the scroll bar position where you have clicked on the sidebar. Unfortunately, Mac will move page by page regardless of where you click the sidebar. You can simply drag and drop the scroll bar to the required position. However, you can also customize the scroll bar click in “General preferences” under “Click in the scroll bar to” section.

Jump to the next page – this is a default option which will move to next page on the document regardless of where you click on the scroll bar.
Jump to the spot that’s clicked – probably this is what you will expect to happen when you click on the middle of the scroll bar and you are at the middle immediately.

Using Arrows and Spacebar

Instead of scroll bars, you can also use arrow keys to navigate through the documents. This is especially useful for vertical scrolling.

Use up or down arrow to move click by click which will move few lines up or down on the document.
Press spacebar to quickly go to next page.

Scrolling Direction of Scroll Bars in Mac

Another factor when using vertical scroll bar using trackpad is the scrolling direction. For most of us, the scrolling needs to be on the opposite direction of the double finger swiping direction. This means when you swipe double fingers down the content will move up and vice versa. This is called unnatural scrolling.

However, natural scrolling is when you swipe the fingers down the content also will move down and vice versa. This means the content will track the direction of your finger movement.

Go to “Apple Menu > System Preferences…” and click on “Trackpad” option.
Click on “Scroll & Zoom” tab.
Enable or disable “Scroll direction: Natural” option to setup the scrolling direction.

Scroll Bars Option in macOS 13 (Ventura or Later)

If you are using macOS Ventura, Sonoma or later versions then the interface may look bit different with similar set of options.

Click the Apple logo and go to “System Settings…” menu.

Go to “Appearance” section and then scroll down to the bottom on the settings page.
Select your preference under “Show scroll bars” section.

Scroll Bar Setting in macOS Ventura or Sonoma

Similarly, you can setup the scrolling direction from “Trackpad” settings page.

Scroll Bars in Mac Third Party Apps

All the scroll bar settings, except the direction, apply only to the default Apple apps like Pages, Safari , Finder, Preview, etc. This will NOT work for the third party apps like Google Chrome.

Scroll bars are always visible on most of third party apps regardless of your settings in general preferences.
You can move the scroll bar and the content to the clicked position though you have set “Jump to the next page” in preferences.

In our opinion, these are the ideal settings for apps in order to have easy navigation.

About Editorial Staff

Editorial Staff at WebNots are team of experts who love to build websites, find tech hacks and share the learning with community.

You also might be interested in

How to Customize Microsoft Edge Browser?

There are several things you can customize on your Microsoft[...]

How to Fix App Crashing Issues in iPhone?

There are millions of free and premium apps available in[...]

How to Use Handoff Between iPhone and Mac?

One of the biggest success factors behind Apple devices is[...]

Leave your reply.

I found that with OS 16.0.1 that that menu was in the Appearance menu and not the General. Thanks for the information. I think it is going to work. //… Joe

Thank you so much for this article. It’s very helpful! I’m new to MacBook and I’m impressed with the trackpad gestures that I missed out and it’s so important for navigation. You should’ve included a link to Apple’s article about its multi-touch gestures! ?

DOWNLOAD EBOOKS

SEO Guide for Beginners
WordPress SEO PDF Guide
Weebly SEO PDF Guide
Alt Code Emoji Shortcuts PDF
ALT Code Shortcuts PDF
View All eBooks

FREE SEO TOOLS

Webpage Source Code Viewer
HTTP Header Checker
What is My IP Address?
Google Cache Checker
Domain Age Checker Tool
View All Free Web and SEO Tools

Type and press Enter to search

How to Easily Disable Smooth Scrolling on Safari for Mac

Learn about smooth scrolling on Mac

Enable and Access Safari Debug Menu via Terminal command

Disable Smooth Scrolling and hide debug menu using Terminal.

Disable Smooth Scrolling in Safari Mac feature image

Apple introduced smooth scrolling on Mac with Safari 16.4 Usually, the scrolling seems jittery when you use arrow keys and try to access a large webpage. Smooth scrolling tries to fix this by continuously scrolling until a key is released. Or you have to press the mouse button to stop the scrolling. Many have reported that smooth scrolling causes eye strain and difficulty in focusing. Let us learn how to turn off smooth scrolling on macOS.

Unfortunately, there is no native way to disable smooth scrolling. Either you are stuck with it or follow the steps in this article to disable smooth scrolling. The feature is automatically activated when you keep pressing the up or down arrow mark.

I have noticed that smooth scrolling often interferes with other functions. For instance, the gesture stops working when you access multiple pages with smooth scrolling. I only wished Apple had added a checkbox to turn off this feature on Safari.

How to Disable Smooth Scrolling

The solution to this problem lies in multiple parts. Firstly, you need full disk access for the Terminal. It is required as you have to unhide Safari’s hidden debug menu. Once done, turn off smooth scrolling using the debug menu. It might seem overwhelming, but the steps are simple and easy to follow.

1. Enable Full Disk Access

Time needed: 3 minutes

For the sake of convenience, we have segregated the solution into different sections.

2. Open and Access the Safari Debug Menu

1. Close Safari browser if open.

2. Open the Terminal app. Head over to Applications>Utilities .

3. Copy and paste the command below. Ensure that there is no white space or typo. Once done, press Return.

defaults write com.apple.Safari IncludeInternalDebugMenu -bool true

Type terminal command to disable Safari debug menu

Kudos! You have enabled full disk access and successfully opened the Safari debug menu. In the next part, you must turn off smooth scrolling using the debug menu.

3. Disable Smooth Scrolling on Safari

With the help of Terminal, you can change hidden Safari settings. Let us use this method to turn off smooth scrolling on Mac. Quit Terminal and open Safari.

Select Debug>Webkit Internal Features> EventHandlerdriven smooth keyboard scrolling from the debug menu. Ensure that the checkmark is removed. Now, by default, the debug menu stays on the Safari browser.

However, you can disable or hide it using the following Terminal command.

defaults write com.apple.Safari IncludeInternalDebugMenu -bool false

Note that hiding the Safari debug menu will not affect any settings. The only thing is you cannot alter them.

Some features like Smooth scroll are polarising in nature. Users should have the option to turn such features on or off. You can disable Smooth scrolling on Mac by following the steps above. Did you know Safari lets you download videos on iPhone and iPad ? Check out other hidden features in the debug menu, and let us know which is your favorite in the comments below.

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!

How to disable smooth scrolling when pressing the arrow keys in Safari for Mac

Did you know you can disable smooth scrolling in the Safari browser on your Mac? Doing so lets you scroll pages line by line with the arrow keys on your keyboard.

Apple added support for smooth webpage scrolling to Safari 16.4, which was released for macOS Monterey and Big Sur. This behavior is also present in Safari for macOS Sonoma, the latest Mac operating system.

With some digging, you can revert to scrolling pages line by line when pressing directional arrow keys on the keyboard. For that to happen, you’ll need to tick off a setting in Safari’s hidden Debug menu, as instructed in this tutorial.

How to disable smooth scrolling in Safari for Mac

To stop Safari’s smooth scrolling behavior, you must toggle an option in Safari’s hidden Debug menu. But first, you must reveal the menu if you haven’t already. You can do so through Terminal, but you’ll need to give the Terminal app permission to access the whole file system on your Mac.

1. Enable Full Disk Access for Terminal

Enabling Full Disk Access for Terminal in macOS System Settings

Click the Apple menu and choose System Settings , then select Privacy & Security in the sidebar and click Full Disk Access on the right. Next, slide the switch next to Terminal to the ON position. If Terminal isn’t listed, click the + (Add) icon, navigate to the Applications/Utilities folder on your Mac and double click the Terminal app.

If asked, authenticate with Touch ID, your macOS password or your Apple Watch.

2. Reveal Safari’s hidden Debug menu

macOS Terminal window displaying a command to show Safari's hidden Debug menu

With that done, we can now turn on Safari’s hidden Debug menu. Open Terminal from the Applications/Utilities folder, paste the following command into the Terminal window and press Return or Enter to execute it:

With the Debug menu turned on in Safari, we can proceed to the final step.

3. Turn smooth scrolling off

Turning off smooth scrolling in Safari's Debug menu

Now open Safari , click the Debug menu and select WebKit Internal Features > EventHandler driven smooth keyboard scrolling . Doing so should remove the checkmark from the option, deactivating smooth scrolling.

With smooth scrolling disabled, pressing an arrow key on the keyboard will no longer scroll a page continuously until you release the key. Instead, the page will move one line at a time.

To reactivate smooth scrolling, toggle the Debug menu option to add a checkmark. When done, you can safely hide the Debug menu again with this Terminal command:

Hiding the Debug menu will not change your smooth scrolling setting.

Which scrolling type are you: Smooth or jumpy?

Smooth scrolling isn’t a biggie as long as you don’t use the arrow keys. But if you’re like me and prefer to scroll an article one line or page at a time using the keyboard, you may want to switch back to the good ol’ jumpy scrolling method.

It would’ve been far better had Apple put this toggle in the Safari preferences, so we could change the scrolling type with a simple checkbox instead of digging through hidden menus. Be that as it may, now you at least have the option to change Safari’s scrolling method in case you’re not a fan of smooth scrolling.