vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面
内容:一般要求鼠标禁止滑轮滚动页面时,需要实现页面点击滚动,跌跌撞撞,走了很多弯路实现了wwwwwwvue代码:// 首先在需要的滑动的页面上d的主标签加鼠标禁止事件, @touchmove.prevent @mousewheel.prevent<template><div id="home-container" ref="view" @touchmove.prevent @mo
·
内容:
一般要求鼠标禁止滑轮滚动页面时,需要实现页面点击滚动,跌跌撞撞,走了很多弯路实现了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
更多推荐
已为社区贡献6条内容
所有评论(0)