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

Detailed explanation of the loading rules of the require method in node.js

Loading rules of require method Prioritize loadin...

HTML Language Encyclopedia

123WORDPRESS.COM--HTML超文本标记语言速查手册<!-- --> !D...

Detailed explanation of Linux file permissions and group modification commands

In Linux, everything is a file (directories are a...

URL Rewrite Module 2.1 URL Rewrite Module Rule Writing

Table of contents Prerequisites Setting up a test...

JavaScript to achieve floor effect

This article shares the specific code of JavaScri...

Graphical explanation of the solutions for front-end processing of small icons

Preface Before starting this article, let’s do a ...

Detailed example of creating and deleting tables in MySQL

The table creation command requires: The name of...

How to reset MySQL root password

Table of contents 1. Forgot the root password and...

Pitfall notes of vuex and pinia in vue3

Table of contents introduce Installation and Usag...

Use of MySQL triggers

Triggers can cause other SQL code to run before o...

Summary of JS tips for creating or filling arrays of arbitrary length

Table of contents Preface Direct filling method f...

JS generates unique ID methods: UUID and NanoID

Table of contents 1. Why NanoID is replacing UUID...

Vue sample code for online preview of office files

I'm working on electronic archives recently, ...