javascript - Vue.js: how to react to page scrolling? - Stack Overflow

admin管理员组

文章数量:1342902

I've the need to react to window (viewport) scrolling to be able to detect when an element is visible or not.

The final goal is create something SIMILAR but not equal to an infinite scroller.

I want to learn to make it by myself. Do not link me plugins Please, I need to understand Vue.js before constructing over other's plugins.

How can I detect page (windows, or better the viewport) scrolling and resizing using Vue.js?

OR

How can I overseer the vertical position of an element, a div or a span, to react when it's near to be visibile ?

In the doc I found the @scroll, but it react to the scrolling of an element, not of the page.

I've the need to react to window (viewport) scrolling to be able to detect when an element is visible or not.

The final goal is create something SIMILAR but not equal to an infinite scroller.

I want to learn to make it by myself. Do not link me plugins Please, I need to understand Vue.js before constructing over other's plugins.

How can I detect page (windows, or better the viewport) scrolling and resizing using Vue.js?

OR

How can I overseer the vertical position of an element, a div or a span, to react when it's near to be visibile ?

In the doc I found the @scroll, but it react to the scrolling of an element, not of the page.

• javascript
• vue.js

Share Improve this question Follow asked Jun 28, 2017 at 14:10 realteborealtebo 25.7k4545 gold badges126126 silver badges216216 bronze badges 2

• Possible duplicate of stackoverflow./questions/45822150/… – agm1984 Commented Nov 3, 2020 at 19:35
• 2 Sorry, but this question is older than your duplicate candidate... a lot older – realtebo Commented Nov 4, 2020 at 14:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

There is a good suggestion here: https://github./vuejs/Discussion/issues/324#issuement-240978025

I duplicate the code here for posterity.

data () {
  return {
    scrolled: false
  };
},
methods: {
  handleScroll () {
    this.scrolled = window.scrollY > 0;
  }
},
created () {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll);
}

You need to add a listener to the global scroll event on the window object.

window.addEventListener('scroll', listener)

You can find good advice on how to handle this event properly on MDN: https://developer.mozilla/en-US/docs/Web/Events/scroll

You can use Node#getBoundingClientRect to pute whether your node is visible, this method will provide you with the top position of your node within its scrollable container, you can use the offsetTop property alternatively. To do so you have to retrieve the viewport height, which is window.innerHeight is your case, and your current scroll position, which is window.scrollY in your case.

Then you can do something like that:

isVisible = innerHeight - scrollY > offsetTop - scrollY

本文标签： javascriptVuejs how to react to page scrollingStack Overflow