Use CSS to Hide Scrollbars on iOS

In this article, we will discover how to use CSS to hide scrollbars on iOS.

In mobile development, it is common to encounter scenarios that require horizontal scrolling, for eaxmple:

However, in many cases, it is not necessary to display this scrollbar, resulting in the following effect:

One possible solution that may come to mind is to directly modify the style of the scroll bar, as demonstrated below:

::-webkit-scrollbar {
  display: none;
}

Currently, there appear to be no apparent issues, but it is ineffective on certain versions of iOS as the scrollbar continues to appear.

Are there any alternative methods to resolve this issue?

The following methods will be introduced below.

Using overflow

Below is a horizontal scrolling list:

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Enable horizontal scrolling

.list{
  display: flex;
  overflow: auto;
  gap: 10px;
  padding: 10px;
}

.item{
  width: 100px;
  height: 100px;
  background: royalblue;
  border-radius: 8px;
  flex-shrink: 0;
}

The method of concealing through “overflow” is straightforward; a parent element is required.

<div class="wrap">
  <div class="list">
    
  </div>
</div>

Next, increase the padding at the bottom of the list slightly.

.list{
  /**/
  padding-bottom: 20px;
}

The distance below the list has increased, and the scroll bar has also moved further down, as illustrated in the following image.

How can the overall dimensions be maintained? The solution is to utilize negative “margin”. For example, if the previous bottom padding was 10, it can now be changed to 20, requiring a negative margin of -10.

.list{
  /**/
  margin-bottom: -10px;
}

Finally, it is only necessary to set the parent’s “overflow” property to “hidden”.

.wrap{
  /**/
  overflow: hidden;
}

The principle is illustrated as follows.

Certainly, not only “overflow”, but the following method can also achieve the effect of hiding overflow.

https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain

.wrap{
  /**/
  contain: paint;
}

Using clip

To remove a portion of the scrollbar, the inset method of clip-path can be utilized.

clip-path: inset()

The “inset” function can accept up to four parameters, which respectively indicate the amount to be cropped from the top, right, bottom, and left sides.

Therefore, hiding the scroll bar is a straightforward process. It can be achieved by setting the bottom clipping distance to a value greater than the size of the scroll bar, in this case, 10px.

.list{
  clip-path: inset(0 0 10px)
}

Using mask

In fact, the concept is consistent with the “clip” approach, but the implementation method differs. Regarding the mask overlay, the main principle is to display the non-transparent parts of the overlay image while clipping the transparent parts.

In this context, it is sufficient to create a solid color gradient without including the scrollbar portion. This can be achieved by directly drawing a solid color gradient and subsequently adjusting the background size.

.list{
  -webkit-mask: linear-gradient(red, red) 0 0/100% calc(100% - 10px) no-repeat;
}

In addition, masks can effectively achieve the gradual fading effect of scrolling boundaries by overlaying a layer of gradient from transparent to solid color to transparent.

.list{
  -webkit-mask: linear-gradient(to right, transparent, red 15px calc(100% - 15px), transparent),  
  linear-gradient(red, red) 0 0/100% calc(100% - 10px) no-repeat;
  -webkit-mask-composite: source-in;
}

Conclusion

The above text provides an overview of three methods for hiding scrollbars.

• The “overflow” method is the most compatible and intuitive, aligning with the majority of people’s thinking. However, it requires the addition of an extra layer of nesting.
• The “clip” method is the simplest to implement and understand, making it the recommended approach in this case.
• The “mask” method shares similarities with the “clip” method but is slightly more complex to implement. It also allows for more advanced fading effects and offers greater control.