Event monitoring & page scrolling (show/hide an element when the page scrolls to a certain position, Vue environment)

content

2. Get the distance from the window to the top of the element

1. Effect display

When I was working on a project recently, a web page was rendered like this. A certain element was not displayed at the beginning, and the element was displayed only when the page was slid to the specified position. The effect is as follows:

2. Implementation steps

1. Create an element and set it to fixed positioning.

2. First, hide the elements that need to be operated by using the show-hide instruction v-show in Vue;

3. Create a monitoring window scrolling method in methods , and determine whether to display it by judging the distance between the top of the element and the top of the page;

//监听窗口滚动
windowScrollListener() {
  //获取操作元素最顶端到页面顶端的垂直距离
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop >= 480) {
    this.isVisable = true; //大于480时显示元素
  }
  if (scrollTop < 480) {
    this.isVisable = false; //小于480时隐藏元素
  }
}

4. Bind the listener event to monitor in the created phase;

created() {
   //添加滚动监听事件
   //在窗口滚动时调用监听窗口滚动方法
   window.addEventListener('scroll', this.windowScrollListener);
},

5. In the destruction phase , delete the listening event in the destory , and delete it when leaving the page to ensure that it will not affect other pages.

destroyed() {
   //离开页面时删除该监听
   window.removeEventListener('scroll', this.windowScrollListener)
}

3. Main points involved

1. Vue syntax v-show

<元素 v-show="true/false">

A special command that specifically controls the display and hiding of an element, when using a program to control the display or hiding of an element. When new Vue() scans to v-show, it will first calculate the value of the judgment condition on the right side of =. If the judgment condition on the right side of = is true, the current element will be displayed normally by default. If the judgment condition on the right side is false, Then v-show is automatically translated to display:none, and the current element is hidden and does not occupy space .

2. Get the distance from the window to the top of the element

First you need to get the vertical distance of the page scrolling. The first step is to get the viewable area of the browser (the area where the page can be seen in the browser).

(1) First use document.documentElement to get the page;

Note here:

In IE browsers that do not declare DOCTYPE, the browser display window size can only be obtained as follows:
document.body.offsetWidth
document.body.offsetHeight
In a browser that declares a DOCTYPE, you can use the following to get the browser display window size:
document.documentElement.clientWidth
document.documentElement.clientHeight
So to accommodate all browsers, we can use both:
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

(2) Use the attribute scrollTop to get the distance between the top of the object and the top of the visible content in the window, that is, the distance from the top of the div we want to operate to the top of the page.

3. Listen for events

Add a listener event: addEventListener() ; remove a listener event: removeEventListener() ; the syntax is as follows:
element.addEventListener(event, function, useCapture);
The first parameter is the event type;

The second parameter is the function called when the event occurs;

The third parameter specifies whether to use event bubbling or event capture. This parameter is optional.

As in our code, the judgment method in methods is called when the window is scrolled.

window.addEventListener('scroll', this.windowScrollListener);