This is the 21st day of my participation in the August More Text Challenge

Question origin

Recently, I am making a Web page similar to chat interface, as shown in the picture below:

The chat window features:

  1. The latest news is always at the bottom:

This feature is easy to implement by listing all data chat messages as an Array and adding a new message to the end of the Array each time:

. <message v-for="(m, index) in messages" :key="index"></message>

....

data() {
    return {
        messages: []}},methods: {
    addNewMessage(message) {
        messages.push(new_message)
    }
}


....
Copy the code
  1. The window always appears at the bottom by default.

This requires us to scroll the component to the bottom when the page loads and every time a new message is generated, always showing the latest message.

solution

We ran into a similar problem in a post a few days ago. In the article “JavaScript control page scroll position”, we use JavaScript to control the scrolling position of the page.

As shown, we made a simple little window with another gradient inside the scrolling DOM:

Source code for the above styles:

<! DOCTYPEhtml>
<title>Scroll to control</title>
<script>
    window.onload=function() {
        console.log('Load complete')};</script>
<body>
    <div id="outer" class="outer-box">
        <div id="inner" class="inner-box">
        </div>
    </div>
</body>
<style>
    .outer-box {
        height: 300px;
        width: 300px;
        overflow: auto;
        border: 1px solid red;
    }

    .inner-box {
        height: 800px;
        width: 100%;
        background: linear-gradient(white, black);
    }
    
</style>
</html>
Copy the code

We get the size of the relevant value in window.onload:

window.onload=function() {
        console.log('Load complete')
        const outer = document.getElementById("outer")
        console.log('outer.offsetHeight=' + outer.offsetHeight)
        console.log('outer.offsetTop=' + outer.offsetTop)
        console.log('outer.scrollHeight=' + outer.scrollHeight)
        console.log('outer.scrollTop=' + outer.scrollTop)
        console.log('outer.clientHeight=' + outer.clientHeight)
        console.log('outer.clientTop=' + outer.clientTop)
    };
Copy the code

Execution Result:

Let’s break it down one by one.

offsetXXX

offsetHeight

From the above tests, we know roughly that offsetHeight is equal to the height of the sides of the border + the height of the element.

MDN Official documentation:

OffsetHeight is a read-only property that returns the pixel height of the element. The height contains the element’s vertical inner margin and border, and is an integer.

offsetTop

Why is offsetTop equal to 8? MDN Official documentation:

OffsetTop is a read-only property that returns the distance of the current element relative to the top inner margin of its offsetParent element.

OffsetParent is the body element. Let’s try printing out the offsetTop of the inner element:

scrollXXX

scrollHeight

ScrollHeight = scrollHeight

outer.scrollHeight=800
Copy the code

The scrollHeight read-only property is a measure of the height of an element’s content, including content that is not visible in the view due to overflow.

The value of scrollHeight is equal to the minimum height that the element needs to fit into the content used in the viewport without the use of scroll bars. Without the vertical scroll bar, the scrollHeight is the same as the clientHeight minimum that the element view needs to fill everything. The padding of the element is included, but the border and margin are not. ScrollHeight also includes pseudo-elements like ::before and ::after.

In other words, scrollHeight is the overall height of the child element.

scrollTop

This is, so far, the only property that is readable and writable.

This is, so far, the only property that is readable and writable.

This is, so far, the only property that is readable and writable.

The scrollTop property gets or sets the number of pixels that an element’s content scrolls vertically.

An element’s scrollTop value is a measure of the distance from the top of the element’s content (rolled up) to its viewport’s visible content (top). When the content of an element does not produce a vertical scroll bar, its scrollTop value is 0.

ClientHeight and clientTop have nothing to do with scrolling.

The change of the scrollTop

As you slide down, you can see that the value of scrollTop gradually increases to a maximum of 500.

To solve the problem

Going back to our original problem, if you want to keep the element at the bottom when the page loads, you need to set the scrollTop value of DOMouter to (content height – frame height).

After testing, when the setting value exceeds 500, that is, the maximum allowable scrollTop, it will be set to 500. That is, if you want to slide to the bottom by default and the relevant value is not easy to calculate, you can directly set a large value to achieve the purpose.