CSS example code to hide the scroll bar and scroll the content

CSS example code to hide the scroll bar and scroll the content

Preface

When the HTML structure of a page contains many nested boxes, it may cause a page to contain multiple vertical scroll bars.
This will greatly affect the style of the page, so we need to hide the scroll bar while still supporting scrolling. The following are two methods to achieve this using CSS.

Method 1: Calculate the scroll bar width and hide it

Principle: The outer box and the inner box are laid out using the child-parent relationship. The inner box moves 17 pixels to the right, which is exactly equal to the width of the scroll bar (obtained by manual debugging), and this method has no problems in Chrome and IE.

The code is as follows (example):

.outer-container{
     width: 300px;
     height: 200px;
     border:1px solid black;
     overflow:hidden;
     position:relative;
}
.inner-container{
    position:absolute;
    /*The positions of these four directions must be filled in completely, otherwise it will not take effect*/
    top:0;
    left:0;
    bottom:0;
    right:-17px;
    overflow-y: scroll;
}

<div class="outer-container">
    <div class="inner-container">
        I am a good accountant. The interface and the space for recovery will be released as soon as possible. The framework that the customer said will be returned as soon as possible. The payment will be paid as soon as possible. The phone bill will be paid or divided quickly. The customer feedback is a good place. The customer feedback is a good place. The healthy recovery of technology will be a healthy reply. The customer said that the plane customer loan weight loss Master Kong Carnival will recover the healthy reply. The width will happen. The framework will be recovered quickly. The phone feedback is better. It must be a non-framework and third-party delivery reply. The reply will arrive quickly in Hefei technology and the third party will recover as soon as possible. The tight return vacation will pay the phone bill separately. It will definitely pay the phone bill separately. The big man will pay the phone bill separately. The golden phoenix will definitely pay the phone bill separately. The customer's winning number will definitely pay the phone bill separately.</div>
</div>

The effect is as follows:

insert image description here

Method 2: CSS hides the scroll bar

Principle: Customize the pseudo-object selector of the scroll bar::-webkit-scrollbar. However, this method is not compatible with IE and can be used for mobile terminals.

The code is as follows:

.wrapper{
	width: 300px;
	height: 200px;
	overflow:auto;
}
/*Chrome and Safari*/
.wrapper::-webkit-scrollbar { width: 0 !important }
/*IE 10+*/
.wrapper { -ms-overflow-style: none; }
/*Firefox*/
.wrapper { overflow: -moz-scrollbars-none; }

<div class="wrapper">
        <div>I am a good accountant. The interface and the space for recovery will be released as soon as possible. The framework that the customer said will be returned as soon as possible. The payment will be paid as soon as possible. The phone bill will be paid or divided quickly. The customer feedback is a good place. The customer feedback is a good place. The technology is healthy. The healthy reply is the customer's airplane. The customer loan is to lose weight. The healthy reply of Master Kong Carnival will happen. The width of the framework will be restored quickly. The phone feedback is better. It must be a non-framework and third-party delivery reply. The reply will arrive quickly in Hefei. Technology and the third party will recover as soon as possible. The tight return vacation will pay the phone bill separately. It will definitely pay the phone bill separately. The big man will pay the phone bill separately. The golden phoenix will definitely pay the phone bill separately. The customer's lottery number will definitely pay the phone bill separately.</div>
</div>

The effect is as follows:

insert image description here

This is the end of this article about how to hide the scroll bar and scroll the content with CSS. For more information about how to hide the scroll bar with CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Detailed installation process of Jenkins on Linux

>>:  HTML Basics_General Tags, Common Tags and Tables

Recommend

HTML+CSS+JavaScript to create a simple tic-tac-toe game

Table of contents Implementing HTML Add CSS Imple...

A few things about favicon.ico (it’s best to put it in the root directory)

Open any web page: for example, http://www.baidu....

How to Easily Remove Source Installed Packages in Linux

Step 1: Install Stow In this example, we are usin...

Docker starts in Exited state

After docker run, the status is always Exited Sol...

Example code for implementing background blur effect with CSS

Is it the effect below? If so, please continue re...

react-beautiful-dnd implements component drag and drop function

Table of contents 1. Installation 2.APi 3. react-...

Docker Nginx container production and deployment implementation method

Quick Start 1. Find the nginx image on Docker Hub...

Install Python 3.6 on Linux and avoid pitfalls

Installation of Python 3 1. Install dependent env...

Detailed explanation and summary of the URL for database connection

Detailed explanation and summary of the URL for d...

Mysql optimization Zabbix partition optimization

The biggest bottleneck of using zabbix is ​​the d...

Differences between MySQL CHAR and VARCHAR when storing and reading

Introduction Do you really know the difference be...

Graphical steps of zabbix monitoring vmware exsi host

1. Enter the virtualization vcenter, log in with ...