Added rolling event Settings in Vue

I. Problem discovery

In the event document of Vue, I tested the scroll event and found that the following is not feasible, the scroll event cannot be triggered. After searching, I did not find the reason, but I found two other scroll events set in Vue.

<div @scroll='showOut'></div>
Copy the code

Second, cause analysis

no

Third, solutions

1. Direct utilizationmousewheelEvent alternativescrollThe event

<div @mousewheel='showOut'></div>
Copy the code

Mousewheel. Obviously, moving the mousewheel triggers events, but dragging the scroll bar with the cursor does not.

2. Add scrolling events similar to native JS

	new Vue({
		el:'#app'.data: {scroll:'0'
			
		},
		methods: {// showOut: function ( ) {
			// console.log('hhhhh')

			// }
			scrollDs : function ( ) {
				Document.documentelement is used when a page specifies a DTD, i.e. when a DOCTYPE is specified.
				// The page does not have a DTD, that is, if no DOCTYPE is specified, document.body is used.
				this.scroll = document.documentElement.scrollTop
				console.log(this.scroll)
				
			}
		},
		// created: called before the template is rendered to HTML, which usually initializes some property values and then renders to a view.
		// Mounted: Specifies whether to perform any operations on the HTML DOM node after the template is rendered to HTML.
		mounted(){
			The addEventListener method is used to add events to the specified element
			// Parameter 1: Mandatory event name such as click, Scroll, mouseEnter
			// Parameter 2: Optional specifies the function to execute when the event is triggered
			// Parameter 3: Optional Boolean specifies whether the event should be executed in the capture or bubble phase
			// true - The event is executed in the handle capture phase
			// false - The event handle bubble phase is executed
			window.addEventListener('scroll'.this.scrollDs , true)}})Copy the code

This method can trigger events using either a scroll wheel or a cursor dragging a scroll bar.