Hello~ Dear audience gentlemen! National Day mid Autumn Holiday is coming to an end. It’s time for me to pick up my heart and study hard. This time for you to bring is two good API introduction, is also lazy artifact.

According to the MDN description, the element.scrollintoView () method lets the current Element scroll into the viewable area of the browser window.

And Element. ScrollIntoViewIfNeeded () method is also used to will not in the visible region of the browser window elements, scroll to the visible region of the browser window. But if the element is already in the visible area of the browser window, no scrolling will occur. This method is a proprietary variant of the standard Element.scrollintoView () method.

So any need to go back to the top, go to the top, and pop up the keyboard to block the input field can be easily solved.

However, when faced with a good API, the front end’s first response is, look at compatibility!

Let’s start with scrollIntoView:

See a piece of yellow yellow green, the basic can feel at ease, do not support only the value of a property, there will be introduced below ~

Then look at scrollIntoViewIfNeeded:

IE and FireFox all red, if the PC end wants to use the words, the basic can only internal project, a little pity. But the mobile terminal or green leisurely, basically OK, can be at ease to use ~

Because this article is introduced to ~ therefore each attribute I have written a little demo, point in can experience!

scrollIntoView

First introduced scrollIntoView, actually very simple to use, after obtaining an element, direct call scrollIntoViewIfNeeded () can, simple demo point it’s good, click on the side of the little green block, the page will be rolled up. The demo code looks something like this:

<body>
    <div class="chunk"></div>
    <div class="btn">click</div>
    <script>
    const btn = document.querySelector('.btn');
    const test = document.querySelector('.chunk');
    btn.addEventListener('click'.function() {
      test.scrollIntoView();
    })
    </script>
</body>Copy the code

Is it very simple ~ but there may be students have questions, this is not the same as the anchor point positioning? It doesn’t make sense! Now, don’t worry, when you call scrollIntoView, you can actually pass arguments in. ScrollIntoView takes only one argument, but it takes two types of arguments, Boolean and Object.

Let’s start with Boolean arguments, which, as the name suggests, can be true or false. If true, the top of the element is aligned with the top of the visible area of the scroll where it is located. If false, the bottom of the element is aligned with the bottom of the visible area of the scroll where it is located. A simple example can be found here. The main code is as follows:

<body>
    <div class="chunk"></div>
    <div class="btn-top">up</div>
    <div class="btn-bottom">down</div>
    <script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click'.function() {
      test.scrollIntoView(true);
    });
    down.addEventListener('click'.function() {
      test.scrollIntoView(false);
    });
    </script>
</body>Copy the code

As you can see, when the arguments are true and false, respectively, the red div will be near the top or bottom of the visible area when the button on the right is clicked.

This is followed by the Object argument, which has two options, namely the key in the Object. Block is the same as the previous Boolean argument, except that instead of true and false, the values are more semantically start and end.

The other option is Behavior, which is given three desirable values on MDN: auto, instant, and smooth. 图 文 : The instant value of scroll behavior was renamed to auto. 图 文 : The instant value of scroll behavior was renamed to auto. Therefore, it is almost certain that the two performances are consistent. “Smooth” is a process with animation. Unfortunately, as mentioned earlier in compatibility, yellow does not support a certain property, namely, it does not support “smooth” behavior. In addition, after testing Internet Explorer and mobile UC browsers, it is found that they do not support the Object parameter at all, so the scrollIntoView({… }), only the default result, which is scrollIntoView(true). For a simple example, see here. If you want to experience smooth effects, you need to use Chrome or Firefox! The main code is as follows:

<body>
    <div class="chunk"></div>
    <div class="btn-top">up</div>
    <div class="btn-bottom">down</div>
    <script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click'.function() {
      test.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });
    });
    down.addEventListener('click'.function() {
      test.scrollIntoView({
        block: 'end',
        behavior: 'smooth'
      });
    });
    </script>
</body>Copy the code

scrollIntoViewIfNeeded

Having introduced scrollIntoView, it’s time to introduce its variant, scrollIntoViewIfNeeded. There are two main differences. The first is that scrollIntoViewIfNeeded is lazy. If the element is in the visible area, the page will not scroll when it is called. The second is scrollIntoViewIfNeeded, which has only a Boolean parameter. That is, it is all instantaneously scrolled, with no animation possible.

ScrollIntoViewIfNeeded can take a Boolean argument. Unlike scrollIntoView, true is the default value, but instead of scrolling to the top, elements are centered in the visible area. When false, elements may be aligned at the top or bottom, depending on which side the element is closer to. A simple example can be found here. The rough code is as follows:

<body>
    <div class="chunk"></div>
    <div class="scrollIntoView">scrollIntoView top</div>
    <div class="scrollIntoViewIfNeeded-top">scrollIntoViewIfNeeded top</div>
    <div class="scrollIntoViewIfNeeded-bottom">scrollIntoViewIfNeeded botom</div>
    <script>
    const scrollIntoView = document.querySelector('.scrollIntoView');
    const scrollIntoViewIfNeededTop = document.querySelector('.scrollIntoViewIfNeeded-top');
    const scrollIntoViewIfNeededBottom = document.querySelector('.scrollIntoViewIfNeeded-bottom');
    const test = document.querySelector('.chunk');
    scrollIntoView.addEventListener('click'.function() {
      test.scrollIntoView(true);
    });
    scrollIntoViewIfNeededTop.addEventListener('click'.function() {
      test.scrollIntoViewIfNeeded(true);
    });
    scrollIntoViewIfNeededBottom.addEventListener('click'.function() {
      test.scrollIntoViewIfNeeded(false);
    });
    </script>
</body>Copy the code

As the documentation states, scrollIntoView() calls to scrollIntoViewIfNeeded() do not scrollIntoViewIfNeeded while the red div is completely in the visible area. And when I did, I found some details that the documentation didn’t have. ScrollIntoViewIfNeeded () scrolling occurs when an element is in the visible area, but not all of it, whether the argument is true or false, and the effect is to scroll until the element is aligned to the top or bottom of the visible area, depending on which end the element is closer to. You need to pay attention to this ~

summary

This API is not required and there are many other ways to achieve its effect. However, it’s nice to save a lot of JS code or a bunch of anchors if you can.

Thank you for reading this article. I hope you found it helpful. Make sure to use these two apis!