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

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

js禁止鼠标滑轮_js 禁止鼠标滑轮滚动的事件
如题,代码如下: // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 3 ...
vue 组件封装 | s-fullpage 全屏滚动（内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
目录目标实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例范例效果目标实现类似插 ...
更改Windows鼠标滑轮滚动方向
经常在Mac和Windows PC切换的人往往会遇到这样一个问题,那就是鼠标滑轮的方向恰好相反.改变Mac的鼠标滑轮滚动方向很简单,系统偏好设置-鼠标-滚动方向,把"自然"的对勾勾 ...
图片随鼠标滑轮滚动变大变小
* 图片随鼠标滑轮滚动变大变小,最大不超过屏幕宽度-360 */ <HTML> <HEAD> <meta http-equiv="Content-Type&qu ...
java控制鼠标滑轮的滚动速度来滚动滚动面板和鼠标滑轮滚动事件
//虽然比较短,但还是分享下吧....就当是个随笔吧- //设置滚动面板的滚动速度 JScrollPane.getVerticalScrollBar().setUnitIncrement(10); / ...
怎样用c语言禁止鼠标滑轮,如何禁用鼠标滚轮-禁用鼠标滚轮的教程 - 河东软件园...
最近有位用户向小编询问,如何禁用鼠标的滑轮?大家可能会觉得很奇怪,为什么要禁用滑轮呢?滑轮的存在不就是为了翻页更加的方便么?其实在使用电脑的过程中,有的时候禁用滑轮能够带来很多的好处,既可以避免页面滚 ...
判断鼠标滑轮滚动事件
windowAddMouseWheel() {let that = thislet scrollFunc = function (e) {e = e || window.eventif (e.whee ...
html鼠标滚轮监听,js鼠标滑轮滚动监听触发事件
判断鼠标滚动方向执行不同的事件代码,兼容IE.Firefox.chrome浏览器.javascript代码如下: var scrollFunc = function (e) { var direct ...
鼠标滑轮滚动实现换页
windowAddMouseWheel(); function windowAddMouseWheel() { var i = 0;var j = 0;var scrollFunc = functio ...

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

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

最新文章

热门文章