Vue listens for rolling events

Vue listens for page scroll events

The window.pageXOffset window.pageYOffset property returns the pixels in which the document scrolls horizontally and vertically in the upper left corner of the window.

<script> export default {data () {return {// scrollTop: 0}}, methods: {// Save the scroll value, This writing is compatible handleScroll () {this. ScrollTop = window. PageYOffset | | document. The documentElement. The scrollTop | | Document.body. scrollTop // The variable scrollTop is when the scrollbar scrolls, Var scrollTop = distance from the top of the distance document. The documentElement. The scrollTop | | document. The body. The scrollTop; / / variable windowHeight is highly visible area var windowHeight = document. The documentElement. ClientHeight | | document. Body. ClientHeight; / / variable windowHeight is highly visible area var scrollHeight = document. The documentElement. ScrollHeight | | document. Body. ScrollHeight; If (scrollTop + windowHeight == scrollHeight){if(scrollTop + windowHeight == scrollHeight){ / / the scroll bar to return to the top backTop () {if (this. ScrollTop > 10) {document. DocumentElement. ScrollTop = 0}}}, Mounted () {window.addeventListener ('scroll', this.handlescroll, true)}, destroyed () { Otherwise an error window. The removeEventListener (' scroll ', enclosing handleScroll)}} < / script >Copy the code