Solving "Overscrolling Tab Button" Issue

Introduction

When you scroll through a page, the tab button takes up considerable space, causing the page to scroll further than desired before reaching the end. This can be a nuisance as it adds extra effort. Fortunately, the unwanted overscroll of tab buttons can be fixed with a few HTML and CSS edits. This guide will explain the steps to help make that happen.

Steps

In your HTML file, add a "wrapper" class to your section. This class is used as a parent element that is used to specify a limited scope.

<section class='wrapper'>
 <!-- content inside this section -->
</section>

Next, add a container class to the section. This container is the outer border of the section, and helps to prevent overscroll.

<section class='wrapper'>
 <div class='container'>
     <!-- content inside this container -->
 </div>
</section>

In your CSS file, add the following styles to the class "wrapper". This will help limit the scope of the tab button.

.wrapper {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}

Finally, the container class should be used to set the wide of the tab button to limit it size.

.container {
 width: 100%;
 max-width: 1750px;
 margin: 0 auto;
}

FAQ

Q1. How do I add a wrapper class to the section?

A. To add a wrapper class to the section, you will need to add the following code to your HTML file:

<section class='wrapper'>
    <!-- content inside this section -->
</section>

Q2. Why do we need the container class?

A. The container class is used to create an outer border for the section and helps to prevent overscroll from the tab button.

Q3. How do I set the width of the tab button?

A. To set the width of the tab button, you will need to add the following code to your CSS file:

.container {
    width: 100%;
    max-width: 1750px;
    margin: 0 auto;
}

Q4. What is the purpose of the wrapper class?

A. The wrapper class is used to specify a limited scope and helps to prevent the tab button from overscrolling the page.

Q5. What is the benefit of adding an overflow-x property?

A. Adding an overflow-x property helps to limit the width of the tab button, thus preventing it from overscrolling the page.

Related Links

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

https://dev.to/vaibhavkhulbe/css-overscroll-overflow-touch-actions-4lhb