Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to set the global scroll bar height in web development. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

classification

According to my personal understanding, scrolling is divided into global scrolling (browser window) and local scrolling (custom box). Most of the following refers to global scrolling. If local scrolling, get the specified DOM and then call the corresponding API to ✅.

How to set the height of the global scroll bar

The most common method:

Window.scrollTo (0,0); / / orwindow.scrollTo ({left: 0, top: 100})

You can also take advantage of the relative scrolling settings:

Window.scrollBy (0,0); / / orwindow.scrollBy ({left: 0, top: 100})

Or use scrollTop settings:

Document.scrollingElement.scrollTop = 100

Note: the parameters of scrollTo and scrollBy are the same, except that the scrollBy scrolling distance is relative to the current scroll bar position to scroll ✅.

The results are as follows:

Obviously, the former sets the scrolling height to 100, while the latter increases by 100 each time, which is why it is called relative scrolling ✅.

How to specify an element to be displayed in the window

The most common method:

/ / get the offsetTop of the element (the distance from the top of the document) let offsetTop = document.querySelector (".box") .offsetTop;// sets the height of the scroll bar window.scrollTo (0, offsetTop)

The effect is as follows:

Or use anchor points:

The box appears at the top.

The effect is as follows:

Or use scrollIntoView to show:

Document.querySelector (".box") .scrollIntoView ()

The effect is as follows:

You can also specify where the element appears:

/ / start appears at the top of the viewport, center appears in the center of the viewport, and end appears at the bottom of the viewport document.querySelector (".box") .scrollIntoView ({block: "start" | | "center" | | "end"})

The effect is as follows:

How to set scrolling to have a smooth transition effect using the parameter settings of each method:

Window.scrollTo ({behavior: "smooth"}); window.scrollBy ({behavior: "smooth"}); document.querySelector (".box") .scrollIntoView ({behavior: "smooth"})

The effect is as follows:

Or set it with the css property:

Html {scroll-behavior: smooth; / / Global scrolling has smoothing effect} / / or all * {scroll-behavior: smooth;}

The effect is as follows:

Note: after setting this property, all methods can choose one of the two without setting the behavior parameter. Because both control the scrolling behavior of the current specified element, anchor jump and setting scrollTop also have smooth (smooth) scrolling behavior ✅

Something interesting.

1. ScrollingElement

This object is very compatible to get scrollTop, scrollHeight and other properties, which works well on both the mobile and PC sides.

Remember when you wrote this compatibility method:

Let scrollHeight = document.documentElement.scrollHeight | | document.body.scrollHeight

Now all you need is:

Let scrollHeight = document.scrollingElement.scrollHeight

Because this is how it is introduced in MDN:

Standard mode returns documentElement, weird mode returns body

two。 Scroll to the bottom

Window.scrollTo ({left: 0, top: document.scrollingElement.scrollHeight}); / / if you are really lazy... window.scrollTo (0, 999999)

Note: smoothly scroll to the top or bottom to add your own parameters or attributes to ✅.

3. Determine that the browser has scrolled to the bottom

Window.addEventListener ("scroll", () = > {let {scrollTop, scrollHeight, clientHeight} = document.scrollingElement; / / current scroll height + viewport height > = document total height if (scrollTop + clientHeight > = scrollHeight) {console.log ("bottom reached");}})

The effect is as follows:

Function throttling

When you don't add a function to throttle:

Window.addEventListener ("scroll", () = > console.log ("I'm rolling!"))

The effect is as follows:

When you add the function throttling:

Window.addEventListener ("scroll", throttle (()) = > console.log ("I'm rolling!")

The effect is as follows:

Throttle source code:

Function throttle (fn, interval = 500) {let run = true; return function () {if (! run) return; run = false; setTimeout (() = > {fn.apply (this, arguments); run = true;}, interval);};}

Use: reduce the frequency of code execution ✅

Function anti-shaking

When you add a function to prevent shaking:

Window.addEventListener ("scroll", debounce () = > console.log ("Scroll end!")

The effect is as follows:

Debounce source code:

Function debounce (fn, interval = 500) {let timeout = null; return function () {clearTimeout (timeout); timeout = setTimeout (() = > {fn.apply (this, arguments);}, interval);};}

Usefulness: to judge the end of an action, such as the end of scrolling, the end of input input, etc. ✅

Solve the problem of local scrolling of IOS equipment (sticky hand)

In addition to browser native scrolling, this happens to custom scroll bars, which can be solved by adding the following attributes:

.box {- webkit-overflow-scrolling: touch;}

The comparison is as follows:

Note: you need a real machine to see the effect. Here, local scrolling refers to the box defined by yourself, and then set overflow: auto | | scrolling behavior after scroll;

Rolling propagation

Refers to the act of having multiple scrolling areas, and when one scrolling area is finished, the continued scrolling propagates to the parent area to continue scrolling:

.box {overscroll-behavior: contain; / / prevent rolling propagation}

The comparison results are as follows:

Horizontal scrolling

This requirement is often encountered on the mobile end, and it is often used for image display:

/ /. Ul {white-space: nowrap; / / exceeds non-wrapping overflow-x: auto; li {display: inline-block; img {display: block; width: 200px;}

The effect is as follows:

When scrolling is over, force scrolling to the specified element

Based on the example above, we set the following properties:

Ul {scroll-snap-type: x mandatory; li {scroll-snap-align: start;}}

The effect is as follows:

If we look closely, we will find that when we let go, we will scroll the nearest element to the far right (the initial position, the top for the Y axis and the right for the X axis).

You can also set it to appear in the middle:

Li {scroll-snap-align: center;}

The effect is as follows:

In this way, a simple broadcast picture effect will come out!

Full-screen scrolling can also be achieved:

Note: this attribute will be processed after you have scrolled, which means you can jump from Picture 1 to Picture 9 ✅ at once.

Last

The method or property documents mentioned above are as follows:

ScrollTo

ScrollBy

ScrollIntoView

ScrollingElement

Scroll-behavior

-webkit-overflow-scrolling

Overscroll-behavior

Scroll-snap-type

Scroll-snap-align

This is the end of this article on "how to set the height of the global scroll bar in web development". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.