css hides scroll bar but can scroll

With the continuous development of web applications, web design is becoming more and more interactive. As a common interactive element, scroll bars are often used. But sometimes, we may want to hide the scroll bar to make the page look simpler and more beautiful. This article will introduce how to use css to hide the scroll bar but still be able to scroll.

1. Use the overflow attribute of CSS

We can use the overflow attribute of CSS to control the overflow content of the element. The overflow attribute has three parameter values: visible (default value), hidden, scroll and auto.

1. hidden

This attribute value is used to hide an element and its sub-elements. If the content is too long, they will be cut immediately and hidden outside the area.

2. scroll

We can use the scroll attribute value to create a scroll bar in an element. When content is too long to fit on the screen at once, scroll bars allow us to scroll through it all.

Using scroll can achieve the effect of "hiding the scroll bar but still able to scroll". We can set a fixed height and width in the element, let the content overflow, and use "overflow:scroll" to display the scroll bar.

3. auto

Finally, we have an "auto" attribute value. This attribute value specifies that the browser should automatically add scroll bars when necessary, such as when the content is too large. When the content does not exceed the container, no scroll bars will appear.

2. Hide the scroll bar

Therefore, we can use "overflow:hidden" to hide the scroll bar. This will hide our scrollbars and disable scrolling.

.Hide scroll bar {
overflow: hidden;
}

However, in this case we cannot scroll the content through the scroll bar. Therefore, we need to use another method to achieve the desired effect. Here is a basic example that uses "overflow:hidden" to hide the scrollbar.

3. Can still scroll

The next question is how to make the content still scrollable. We can use JavaScript to solve this problem. We need to detect the type of device the user is using since scrollbars are visible on mobile devices.

The following provides a method that allows us to control the behavior of the scroll bar. It depends on jQuery library.

$(document).ready(function(){
if(navigator.userAgent.indexOf('Mac OS X') != -1 || navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1){

$('body').css({
  'overflow-y': 'scroll',
  '-webkit-overflow-scrolling': 'touch'
});

} else {

$('body').css('overflow-y', 'scroll');

}
});

This code will enable standard scroll bars when we browse on a PC or Android device. On Apple devices, it will use similar scrollbars, but emulate native iOS scrollbars. We can scroll content by touching the scroll bar or page.

Of course, this is not the only way. We can also achieve similar effects through CSS without relying on JavaScript. We can set the height and width of the element, hide the scrollbar using "overflow:hidden", and then enable inertial scrolling using "-webkit-overflow-scrolling:touch".

. Enable inertial scrolling {
height: 100%;
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}

4. Conclusion

In this article, we learned how to use CSS to hide scroll bars but still scroll. We've covered two ways to achieve this effect using the overflow attribute and JavaScript. Each method has its own advantages and disadvantages. The final decision depends on your needs. If you need a more flexible and portable solution, use JavaScript. If you just need to simply hide the scrollbars and still be able to scroll, use CSS.

The above is the detailed content of css hides scroll bar but can scroll. For more information, please follow other related articles on the PHP Chinese website!