How to achieve scrolling effect through CSS

In web design, the scrolling effect is a very common effect. Scrolling can make the web page more vivid and dynamic. In CSS, setting scrolling effects is also a relatively basic skill. This article will introduce you to how to achieve scrolling effects through CSS.

1. Use the overflow attribute to set the scroll bar

In CSS, the overflow attribute can be used to set the display mode of the scroll bar, including: scroll, auto, hidden and visible. Among them, scroll means forcing the scroll bar to be displayed; auto means displaying the scroll bar based on the content; hidden means hiding the scroll bar; and visible means always displaying the scroll bar.

For example:

div {
  width:300px;
  height:100px;
  overflow:scroll;
}

The above code means setting a div container with a width of 300px and a height of 100px. When the content exceeds the height of the container, the scroll bar will be displayed.

2. Application::-webkit-scrollbar pseudo-class to beautify scroll bars

Although the overflow attribute can display scroll bars, the default scroll bar style may not be what we want. At this time, we can use the pseudo-class option::-webkit-scrollbar in CSS to beautify the style of the scroll bar. It is worth noting that this pseudo-class is only applicable to browsers with WebKit core (such as Chrome, Safari, etc.).

The following is a sample code:

div {
  width:300px;
  height:100px;
  overflow:scroll;
}
div::-webkit-scrollbar {
  width:10px;
  height:10px;
}
div::-webkit-scrollbar-thumb {
  background-color:rgba(0,0,0,0.5);
  border-radius: 5px;
}
div::-webkit-scrollbar-track {
  background-color:rgba(0,0,0,0.2);
  border-radius: 5px;
}

In the above code, the overall style of the scroll bar is set by setting div::-webkit-scrollbar, including the width and height of the scroll bar. Set the style of the scroll bar slider by setting div::-webkit-scrollbar-thumb, including the background color and corner radius of the slider. Set the style of the scroll bar track by setting div::-webkit-scrollbar-track, including the background color and corner radius of the track.

3. Use JS to achieve the scrolling effect

In addition to the above two methods, using JS is also a way to achieve the scrolling effect. Through the scroll event of JS, some events can be triggered when scrolling the page. For example:

window.addEventListener('scroll', function(e) {
  console.log(window.scrollY);
});

The above code indicates that when the window scrolls, print out the vertical scrolling distance of the current window.

In addition, you can also use some plug-ins to achieve richer scrolling effects, such as fullPage.js, ScrollReveal, etc.

Summary

Through the above introduction, I believe everyone has a deeper understanding of setting scrolling styles in CSS. Using CSS to set scroll bars is an essential skill in web design, which makes web pages more vivid and dynamic. And JS also provides a way for us to achieve richer scrolling effects. Let us use it flexibly in actual development, master more skills, and make web design better.

The above is the detailed content of How to achieve scrolling effect through CSS. For more information, please follow other related articles on the PHP Chinese website!