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

This article mainly introduces how to use vue to monitor the scrolling event of a div in the page and determine the scrolling position. The article is very detailed and has a certain reference value. Interested friends must read it!

In development, we often encounter such a vue page, which is divided into left and right parts. On the left is the directory tree, and on the right is a div called xq-box. In xq-box, multiple div are arranged side by side, and the content in each div corresponds to the corresponding node in the left directory tree. The goal now is to listen for this xq-box scrolling event. Once the right side starts scrolling, you need to know which sub-div to scroll to. And highlight the corresponding node in the directory tree on the left. How does this work?

1. First, write a general layout of the page. Note here that the child div of the xq-box on the right needs to bind the id with "'xqItem'+ serial number", so that the matching dom element can be obtained with js below:

Catalogue

{{menu.name}}

{{item.name}} {{item.content}}

2. Then, give the height of the xq-box in css and set it to exceed the scrolling ability:

. right-box height 600px. Xq-box height 100% overflow-y auto

3. Then, get the dom element of the ref= "xqBox" in the calculation attribute, write a function handleScroll () to get the scrolling distance and determine which two sub-div to scroll to, and listen for the scrolling event of this xq-box after the page is rendered.

Export default {name: "menuList", data () {return {menuActive: 0, / / left highlighted item menuList: [], / / left directory tree xqConList: [] / / right directory content list}}, computed: {xqBox () {return this.$refs.xqBox }, mounted () {this.$nextTick (() = > {/ listening on the scroll event of this dom / / this.xqBox.onscroll = () = > {/ / console.log ("onscroll"); / / this.handleScroll (); / / listening on the scroll event this.xqBox.addEventListener of this dom ("scroll", this.handleScroll);}) }, methods: {handleScroll () {/ / get dom scrolling distance const scrollTop = this.xqBox.scrollTop; / / get visual area height const offsetHeight = this.xqBox.offsetHeight; / / get scroll bar total height const scrollHeight = this.xqBox.scrollHeight; / / xqConList is the directory content list for (let I = 0; I

< this.xqConList.length - 1; i++) { //offsetTop: 获取当前元素到其定位父级（offsetParent）的顶部距离 let offset_before = this.$el.querySelector("#xqItem" + i).offsetTop; let offset_after = this.$el.querySelector("#xqItem" + (i + 1)) .offsetTop; //根据xqItem离顶部距离判断滚动距离落在哪两个item之间 if (scrollTop >

= offset_before & & scrollTop

< offset_after) { // console.log("offset", offset_before, offset_after, scrollTop); // console.log("scrollHeight", scrollTop, offsetHeight, scrollHeight); //判断是否滚动到了底部 if (scrollTop + offsetHeight >

= scrollHeight) {/ / make the distance from the top plus the height of the visible area equal to or greater than the total height of the scroll bar to reach the bottom / / console.log ("scrolled to the bottom"); if (this.menuActive < I) {this.menuActive = I;}} else {this.menuActive = I } break;},}}

According to the query, the Vue component will assign this.$el to the mounted root dom element at the end of the patch phase. We can directly use the querySelector, querySelectorAll and other methods of $el to get the matching elements. Since each content block sub-div in 1 is already bound to id, you can get each sub-div here with this.$el.querySelector ("# xqItem" + I).

It is also important to note that the reason for judging whether or not to scroll to the bottom is that once xq-box scrolls to the bottom, you can see the sub-div corresponding to the last few directories, and the scrolling distance scrollTop will only fall on the top distance of the first sub-div (serial number is the I in the current loop) of the last few sub-div. At this time, if the highlight of the left directory tree happens to be any one of these last directories, there is no need to change the highlight. But if the value of this.menuActive at this time is also smaller than the sequence number of the first of the last few child div, that is, smaller than the I of this loop, you need to change it to the current I value.

4. If you want to click on the left directory tree and xq-box on the right to automatically scroll to the corresponding directory content, add the following methods:

ChooseMenu (name, index) {this.menuActive = index; / you can use scrollIntoView / / document.querySelector ("# xqItem" + index). ScrollIntoView ({/ / block: "start", / / behavior: "smooth" / /}); let offsetTop = this.$el.querySelector ("# xqItem" + index) .offsetTop; console.log ("# xqItem" + index + "offsetTop:" + offsetTop) This.xqBox.scrollTop = this.$el.querySelector ("# xqItem" + index) .offsetTop;}

In this way, "listen for the xq-box scrolling event, once you start scrolling on the right, you need to know which sub-div to scroll to, and highlight the corresponding node in the directory tree on the left."

The above is all the content of the article "how to use vue to listen for a div scrolling event and determine the scrolling position on the page". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.