vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面

内容：
一般要求鼠标禁止滑轮滚动页面时，需要实现页面点击滚动，跌跌撞撞，走了很多弯路实现了wwwwww
vue代码：

// 首先在需要的滑动的页面上d的主标签加鼠标禁止事件, @touchmove.prevent @mousewheel.prevent
<template>
  <div id="home-container" ref="view" @touchmove.prevent @mousewheel.prevent>
  // 下面是我的两个页面,第一个页面
    <div id="first-container">
    // 这是点击向下的函数
     	<div class="img-drop-down" @click="movePage('down', 'first-container')">
              <img src="../assets/img/home/drop-down.png" alt="banner">
        </div>
    <div/>
	// 第二个页面
	<div id="second-container">
	,,,,
	<div/>
  
    <div/>
  <template/>
  

  // 其次在methods中写函数：
methods: {
	// 滚动区域的包裹元素的id
	movePage(type, id) {
		// dom获取元素
		let box = $('#' + id)
		// 可视高度，由于我只有两个页面，因此我直接是利用第一个页面的高度，直接下移了该高度就行
		let viewHeight = box.height() 
		switch (type) {
			case 'down':
			// 由于页面特殊，滚动跳的产生是因为我浏览器的高度>页面高度，所以滚动时是浏览器在下滑，而不是某个盒子在下滑，若为某个盒子下滑，则直接为 【该盒子】.scrollTo
				this.$nextTick(function() {
					window.scrollTo({ "behavior": "smooth", "top": viewHeight })
				})
				break
			case 'up':
			//向上则为负数
					this.$nextTick(function() {
					window.scrollTo({ "behavior": "smooth", "top": -viewHeight })
				})
				break
		}
}
  

总结：

• 可以用<a href=“#element1”> </a >标签跳转，但是在vue中容易有问题

• scrollTop属性:元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度document.documentElement.scrollTop (数字)直接可以跳转

• 要确定到底是谁在滑动，若是某个父盒子高度<子盒子的高度这种内部滚动条，那么可以直接用scrollTop（），否则还是规矩用window.scrollTo