• In Vue development, sometimes you just need to listen for an element to scroll, not the entire page.

  • Vue has @Scroll but it doesn’t do much good, adding a scroll element to a scroll element doesn’t call it, adding CSS to support scroll styles does the same.

  • How do we listen in? The addEventListener is implemented in conjunction with @mousewheel

    • AddEventListener: Added the ability to drag and drop scroll bars to listen for scrolling

    • Mousewheel: Added non-drag scrollbars, such as mouse or trackpad scrolling over elements.

    <template> <! <div class=" scrollView "ref=" scrollView" @mousewheel="scrollChange"> --> <div class="content"></div> </div> </template> <script> export default {mounted () {// Get the specified element const $refs[' scrollView '] = this.$refs[' scrollView '] Plus you can listen to drag the scroll bar rolling callback scrollview. The addEventListener (' scroll ', enclosing scrollChange, true)}, BeforeDestroy () {get specified element const scrollView = this.$refs[' scrollView '] // Remove listener scrollview.removeEventListener('scroll', this.scrollChange, true) }, methods: {// scrollChange () {console.log(' scrolling ')}}} </script> <style scoped>. Scrollview {height: 100px; overflow-y: auto; background-color: yellow; } .content { height: 500px; background-color: red; } </style>Copy the code

  • Effect of case