What is the rolling distance

Let’s say the parent element is setoverflow: hidden;When the content in the element exceeds the height of the element itself, the scroll bar appears, and the distance of the mouse slide is the scrolling distance.

Read roll distance

<head>
    <title>test</title>
    <style>
        ul {
            width: 200px;
            height: 200px;
            background-color: #eee;
            overflow: auto;
            transition: all 1s linear;
            margin-top: 200px;
        }
        li {
            height: 300px; 
            background-color: skyblue;
            list-style-type:none;
        }
    </style>< / head > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- left structure left -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --<ul id="outer">
    <li id="insider">111111111111 22222222222222222222333333333333334444444444444444555555555555 6666666666666666</li>
</ul>

<button onclick="set()">set</button>-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- left js left -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --const outEle = document.getElementById('outer');
const insideEle = document.getElementById('insider');

// Handle the onScroll event
 outEle.onscroll = function readScrollTop() {
     console.log('scrollTop:', outEle.scrollTop); // You can see the distance of the scroll clearly
 }
Copy the code

How to set up scrolling

ScrollTop properties

The scrollTop is the height of the portion of the “contents of the element” beyond the “upper edge of the element.” Assign scrollTop directly to the parent element:

function set() {
    outEle.scrollTop = 100;
}
Copy the code

This method is straightforward, but it does not work because you are setting the JS properties of the DOM element directly, not the CSS properties. Invalid)

Note: sometimes the scrollTop setting is invalid and always 0. One of the reasons for this is that the content has already reached the bottom and cannot be clicked……

ScrollTo method

The scrollTo() method scrolls the interface to the specified coordinates of a given element. It can be used in two ways:

Element. scrollTo(x-coord, y-coord)

  • X-coord is the pixel expected to scroll to the upper left corner of the element on the horizontal axis of the position.

  • Y-coord is the pixel expected to scroll to the upper left corner of the element on the vertical axis of the position.

Element.scrollto (options)

  • Options is an object:
    1. Left (number type)
    2. Top (number type)
    3. Behavior: ‘smooth’

Let’s try both ways of scrollTo() :

function set() {
	// Method 1:
    outEle.scrollTo(0.100)

	// Method 2:
	outEle.scrollTo({top: 100.behavior: 'smooth'})}Copy the code

In the end, you will find that both of them work, but method 1 does not have excessive effects and method 2 does, so if you have requirements for transition animation, I recommend using the second method ~! Note that there are compatibility limitations to the way objects are written:Well, today and everyone to share here ~!