How to disable page scrolling in css

When doing web development, we often encounter the need to fix certain page elements and prohibit them from sliding with the scroll wheel or touching the screen. At this time, CSS provides some methods to prevent the page from scrolling. This article will introduce the implementation steps and usage scenarios of these methods in detail.

1. Disable scrolling of the entire page

1. Use the overflow attribute

Overflow is an attribute in CSS used to control the overflow content of elements. Its values ​​include visible, hidden, scroll, auto, etc. To disable scrolling of the entire page, we only need to add the following style to the root element html or body of the entire page:

html,body{
overflow: hidden;
}

The principle of this method is very simple, which is to hide the overflow part of the page elements, thereby achieving the effect of prohibiting page scrolling.

2. Use position and top attributes

This method needs to add a container element to wrap the page content, and then set the fixed positioning and top attributes to the container element to achieve prohibition Page scrolls. The specific style is as follows:

.container{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Here, the positioning method of the container element is set to fixed, which means that it is fixed relative to the viewport. The top attribute means that the distance between the element and the top of the viewport is 0, which means that the page content is fixed to the viewport. at the top of the page to prevent page scrolling.

2. Disable scrolling of some elements

1. Use the overflow attribute

This method is the same as disabling scrolling of the entire page. You only need to disable scrolling. Just set the overflow attribute of the element to hidden, for example:

.content{
overflow: hidden;
}

2. Use position and top attributes

Similar to the method of disabling scrolling of the entire page, we need to add a container element to wrap the element that needs to be disabled, and add fixed positioning and top attributes to the container element, for example:

.wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.content{
height: 1000px;
overflow : auto;
}

Here, the element that needs to be disabled is placed inside the container element, and the style of the scroll bar that automatically appears after the element exceeds the size is added: overflow: auto, while the container element is Use the above method to achieve the effect of disabling scrolling.

The above is the CSS method to prohibit page scrolling. However, it should be noted that this method only disables page scrolling in performance. In fact, users can still scroll the page through other operations, such as using the browser to move forward and backward, dragging the scroll bar, etc. Therefore, in specific practical applications, appropriate optimization and improvement need to be carried out according to specific needs.

The above is the detailed content of How to disable page scrolling in css. For more information, please follow other related articles on the PHP Chinese website!