How to Fix iOS Scrollbar Always Visible with CSS

The scrollbar is an important element of the user interface that allows users to navigate through a long list or content on a web page. In iOS devices, the default behavior of the scrollbar is to hide it when the user stops scrolling.

However, in some cases, it may be necessary to keep the scrollbar always visible to improve the user experience. In this article, we will discuss the issue of iOS scrollbar always hiding and provide solutions to fix it using CSS.

Why iOS Scrollbar Not Always Visible?

The issue with iOS scrollbar is that it hides automatically when the user stops scrolling. This behavior may cause usability problems for some users, especially those with visual impairments. If the user cannot see the scrollbar, they may not be able to find the content they are looking for, leading to frustration and a poor user experience.

How do I make the scroll bar always visible in CSS?

To fix the issue of the iOS scrollbar hiding, we can use CSS to force the scrollbar to always be visible.

There are several methods to achieve this, including the use of -webkit-scrollbar CSS properties, JavaScript, and custom scrollbar libraries.

Method 1: Using -webkit-scrollbar CSS Properties

The -webkit-scrollbar CSS properties are a set of properties that allow you to customize the appearance of the scrollbar. To keep the scrollbar always visible on iOS devices, we can use the following CSS code:

/* Set the width and height of the scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Set the background color of the scrollbar */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Set the color of the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

/* Keep the scrollbar always visible */
::-webkit-scrollbar-thumb:vertical {
  min-height: 50px;
}

In the above code, we set the width and height of the scrollbar, the background color of the scrollbar track, and the color and border radius of the scrollbar thumb. We also set the minimum height of the scrollbar thumb to 50px to keep it always visible on iOS devices.

Method 2: Always Show Scrollbar on Safari iOS 13

If you are using the iOS 13 and want to apply the scrollbar on specify div then this method is perfect for you. We will utilizes the -webkit-appearance property to achieve the desired effect.

The HTML code consists of two div elements. The outer div element has a class of scrollbar, and the inner div element has a class of scrollbar-child.

<div class="scrollbar">
     <div class="scrollbar-child">A machine that turns coffee into code</div>
</div>

To customize the appearance of the scrollbar, we use the ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb pseudo-elements to target various parts of the scrollbar.

We set the width and height of the scrollbar, the height of the track, and the background, border-radius, and box-shadow of the thumb to achieve the desired look.

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  height: 3px;
}
::-webkit-scrollbar-track {
  height: 5px !important;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px !important;
  height: 3px;
  background: #41617D !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
}
.scrollbar{
  max-width: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: auto
}
.scrollbar-child{
  width: 500px;
}

Method 3: Using JavaScript

Another way to keep the scrollbar always visible on iOS devices is to use JavaScript. The following code demonstrates how to achieve this using jQuery:

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    $('body').css({
        '-webkit-overflow-scrolling': 'auto',
        'overflow-y': 'scroll'
    });
    $(this).scrollTop(scrollTop);
});

In the above code, we use the scroll event to detect when the user is scrolling. We then set the -webkit-overflow-scrolling and overflow-y CSS properties of the body element to ‘auto’ and ‘scroll’, respectively, to force the scrollbar to always be visible. Finally, we reset the scrollTop property to maintain the scroll position.

Method 4: Using Custom Scrollbar Libraries

There are several custom scrollbar libraries available that allow you to customize the appearance and behavior of the scrollbar, including keeping it always visible on iOS devices. Some popular libraries include PerfectScrollbar, SimpleBar, and OverlayScrollbars.

Conclusion

In this article, we discussed the issue of the iOS scrollbar always hiding and provided solutions to fix it using CSS. We demonstrated three methods to achieve this, including using -webkit-scrollbar CSS properties, JavaScript, and custom scrollbar libraries. By keeping the scrollbar always visible, we can improve the user experience and make it easier for users to navigate through long lists or content on web pages.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of codeconvey.com. I developed modern and highly interactive websites. I always focus on improving my development and design skills.

Leave a Comment