Very busy recently, take time to write this article edify sentiment, the browser scroll to see every day, every day really like you now see this article, see would have to scroll down, this article mainly talk about rolling related some methods with attributes, there are some interesting examples 🎈 articles involved in the method or property at the end of the article will put links, facilitate everybody to check!

classification

According to my personal understanding, scrolling is divided into global scrolling (browser window) and local scrolling (custom box), most of the following content refers to global scrolling, local scrolling to obtain the specified DOM and then call the corresponding API can ✅

How to set the global scrollbar height

  1. The most common methods:
window.scrollTo(0, 0);

// or
window.scrollTo({
  left: 0,
  top: 100
});

Copy the code
  1. You can also useRelative to the rollingSettings:
window.scrollBy(0, 0);

// or
window.scrollBy({
  left: 0,
  top: 100
});
Copy the code
  1. Or usescrollTopSettings:
document.scrollingElement.scrollTop = 100;
Copy the code

Note: The parameters of scrollTo and scrollBy are the same, the difference is that the scrollBy distance is relative to the current scrollbar position ✅

The effect comparison is as follows:

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

How do I specify an element to display in a window

  1. The most common methods:
// Get the offsetTop of the element (the distance of the element from the top of the document)let offsetTop = document.querySelector(".box").offsetTop; // Set the height of the scrollbar window.scrollto (0, offsetTop);Copy the code

The effect is as follows:

  1. Or use anchor points:
<a href="#box"> Box appears at top </a> <div id="box"></div>
Copy the code

The effect is as follows:

  1. Or usescrollIntoViewTo exhibit:
document.querySelector(".box").scrollIntoView();
Copy the code

The effect is as follows:

You can also specify where the element appears:

// Start appears at the top of the viewport, center appears at the center of the viewport, and end appears at the bottom of the viewport".box").scrollIntoView({
  block: "start" || "center" || "end"
});
Copy the code

The effect is as follows:

How do I set up a smooth transition for scrolling

  1. Using each methodparameterSettings:
window.scrollTo({
  behavior: "smooth"
});

window.scrollBy({
  behavior: "smooth"
});

document.querySelector(".box").scrollIntoView({
  behavior: "smooth"
});
Copy the code

The effect is as follows:

  1. Or usecssProperty Settings:
html { scroll-behavior: smooth; } // or all * {scroll-behavior: smooth; }Copy the code

The effect is as follows:

Note: After setting this property, all methods do not need to set the behavior parameter. Either method can control the scrolling behavior of the currently specified element, so anchor jump and scrollTop also have smooth scrolling behavior ✅

Something interesting

1. scrollingElement

This object can be very compatible to obtain scrollTop, scrollHeight and other properties, on the mobile end and PC end are successful 🤞

Remember when I wrote this compatibility method:

let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
Copy the code

Now you just need to:

let scrollHeight = document.scrollingElement.scrollHeight;
Copy the code

Because it’s described in MDN like this:

Standard mode returns documentElement, weird mode returns Body;

2. Scroll to the bottom

window.scrollTo({ left: 0, top: document.scrollingElement.scrollHeight }); // If you are really lazy... window.scrollTo(0, 999999);Copy the code

Note: Scroll smoothly to the top or bottom and add parameters or attributes yourself ✅

3. Check whether the browser has been scroll to the bottom

window.addEventListener("scroll", () = > {let{ scrollTop, scrollHeight, clientHeight } = document.scrollingElement; // Current scroll height + viewport height >= Total document heightif (scrollTop + clientHeight >= scrollHeight) {
    console.log("Reached the bottom."); }});Copy the code

The effect is as follows:

Function of the throttle

When you don’t add function throttling:

window.addEventListener("scroll", () => console.log("I'm rolling! I'm rolling!"));
Copy the code

The effect is as follows:

When you add function throttling:

window.addEventListener("scroll", throttle(() => console.log("I'm rolling! I'm rolling!")));
Copy the code

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);
  };
}
Copy the code

Use: reduce code execution frequency ✅

Function image stabilization

When you add the function shakproof:

window.addEventListener("scroll", debounce(() => console.log("Roll over!")));
Copy the code

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);
  };
}
Copy the code

Use: judge the end of an action, such as the end of the scroll just, input input end ✅

Solve the problem of partial scrolling on IOS devices (sticky hands)

In addition to the browser’s native scroll, custom scroll bar can be this situation, add the following properties to solve the problem:

.box {
  -webkit-overflow-scrolling: touch;
}
Copy the code

The comparison is as follows:

Note: to real machine can see effect, here refers to the local rolling refers to define their own box, and then set the overflow: auto | | scroll; After rolling behavior;

Scroll to spread

Refers to the act of having more than one scrolling area, and when one scrolling area is finished, continuing scrolling propagates to the parent area to continue scrolling:

.box { overscroll-behavior: contain; // stop scrolling}Copy the code

The comparison effect is as follows:

Horizontal scroll

Mobile terminal meets this requirement more often, often used for picture display:

<ul>
  <li>
    <img src=""> </li> // ... </ul> ul { white-space: nowrap; // Overflow-x: auto; li { display: inline-block; img { display: block; width: 200px; }}}Copy the code

The effect is as follows:

After scrolling, force scrolling to the specified element

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

ul { scroll-snap-type: x mandatory; li { scroll-snap-align: start; }}Copy the code

The effect is as follows:

If you look closely, when we let go, we scroll the nearest element to the right (the initial position, for the Y-axis, is the top, for the X-axis, is the right).

Can also be set to appear in the middle:

li {
  scroll-snap-align: center;
}
Copy the code

The effect is as follows:

In this way, a simple round – cast graph effect out!

You can also achieve full screen scrolling:

Note: This property is processed after you scroll, meaning you can jump from picture 1 to picture 9✅ in one go

The last

The methods or properties involved are documented as follows:

  1. scrollTo
  2. scrollBy
  3. scrollIntoView
  4. scrollingElement
  5. scroll-behavior
  6. -webkit-overflow-scrolling
  7. overscroll-behavior
  8. scroll-snap-type
  9. scroll-snap-align

If you think this article is good, please don’t forget to like and follow 😊

Related to recommend

Use “cross observer” this little baby, easy to achieve lazy loading, suction top, bottom ❗