scroll bar hidden css

In the process of making web pages, scroll bars are an inevitable design element. However, sometimes the appearance of scroll bars breaks the design of the entire page. In this case, we need to use some tricks to hide the scroll bars.

CSS provides a variety of methods to hide scroll bars, we will introduce them one by one below.

1. Use the overflow attribute

In CSS, we can use the overflow attribute to control whether the content of an element should overflow its container. When the overflow attribute is set to hidden, the element content will be clipped, which can achieve the effect of hiding the scroll bar. The following is the sample code:

body{
  overflow: hidden;
}

The above code will hide the scroll bar of the entire page. If you only want to hide the scroll bar of a certain element, you can find the CSS selector of the element and set the overflow attribute in it. Set to hidden.

#container{
  overflow: hidden;
}

2. Use Webkit styles

Webkit is a CSS engine that supports most modern browsers, including Chrome and Safari. Here are some ways to hide the scrollbar using Webkit styles:

1. Hide the vertical scrollbar:

::-webkit-scrollbar{
  width: 0px;
}

The above code will hide the vertical scrollbar as it is by default The width of the vertical scrollbar is 17px.

2. Hide the horizontal scroll bar:

::-webkit-scrollbar{
  height: 0px;
}

Similarly, the above code will hide the horizontal scroll bar because the height of the horizontal scroll bar is also 17px by default.

3. Hide all scroll bars:

::-webkit-scrollbar{
  display: none;
}

The above code will completely hide all scroll bars.

3. Use jQuery

If you use jQuery, you can also use it to hide the scroll bar. Here are some ways to hide scroll bars using jQuery:

1. Hide vertical scroll bar:

$(document).ready(function(){
  $('body').css('overflow-y', 'hidden');
});

After using the above code, the vertical scroll bar in the page will be hide.

2. Hide the horizontal scroll bar:

$(document).ready(function(){
  $('body').css('overflow-x', 'hidden');
});

The above code will hide the horizontal scroll bar.

4. Using JavaScript

If you want to use native JavaScript to hide the scroll bar, here are some methods you can use:

1. Hide the vertical scroll bar:

document.getElementsByTagName("body")[0].style.overflowY = "hidden";

The above code will hide the vertical scrollbar.

2. Hide the horizontal scroll bar:

document.getElementsByTagName("body")[0].style.overflowX = "hidden";

The above code will hide the horizontal scroll bar.

To sum up, the above are some common methods to hide scroll bars. Depending on your needs, you can choose one or more of these methods. However, it should be noted that hiding the scroll bar will affect the user experience, so trade-offs and simulation tests are required in actual use.

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