vue页面设置滚动失败的完美解决方案(scrollTop一直为0)
目录
  • vue页面设置滚动失败的解决方案(scrollTop一直为0)
    • 背景
    • 误区:
    • 什么时候存在滚动条？
    • Why scrollTop==0?
    • 如何判断页面的滚动条是哪个div产生的？

vue页面设置滚动失败的解决方案(scrollTop一直为0)

背景

希望页面能跳转到 某一位置用到了scrollTop属性。可是发现给某个div设置该属性后，一致为0。找了很多方案，但不都适合自己，或者说不知道是否适合。

怎么看我这个方法适不适合你,你可以尝试打印滚动条的位置,页面滚动后,再次打印滚动条的位置,如果一直为0的话,那我的的这个方法就可以解决你遇到的问题(说明你可能一直在打印窗口的滚动,而不是你真正需要控制滚动的那个元素).

误区:

并不是一股脑设置window.scrollTop就可以让页面滚动的,scrollTop可以用来设置滚动条位置,但是你得找对元素,在路由嵌套的vue页面中,window可能始终是没有滚动的,而你页面上显示的滚动条也只是页面中的元素的滚动条.

什么时候存在滚动条？

页面布局我们可以简单理解为 div盒子套div盒子。当内侧div盒子的高度大于外部时，外部的div就会出现滚动条。此时外部的div才具备scrollTop属性，否则你无论如何设置都为0. 这里隐藏了一些条件：

外部的div一定有高度，否则外部div将和内部div高度一致，不满足大于条件，所以不会出现滚动条。 外部div的 overflow：auto。hidden的情况下超出的部分被隐藏，无法出现滚动条。 如果想设置滚动条属性，一定要知道滚动条是哪个div产生的。

Why scrollTop==0?

总而言之，所有情况都是因为你给一个没有滚动条的元素设置滚动条的位置。 这就涉及到一个知识点的误区: "让页面滚动到指定位置这个需求,不一定是让整个window滚动,在路由嵌套的vue页面中,window可能始终是没有滚动的,产生滚动条的是一个设置了固定高度,且子元素的高度超出了他本身的元素. 这时候,元素才会产生滚动条,而你一股脑的给window设置滚动条位置,window也蒙了"

如何判断页面的滚动条是哪个div产生的？

滚动滚轮,看是哪一块元素在滚动(具体到div上).设置他的父元素的滚动条位置即可让其滚动.

场景1：如何删除body的滚动条，保留某个div的滚动条

body{overflow:hidden;}
div{
height:xxpx;    #小于子元素的高度
overflow-y:auto;
}

场景2：documentElement.scrollTop或者document.body.scrollTop 一直为0的情况

产生根本原因还是因为给没有scrollTop的元素设定了该值，直接原因是因为浏览器兼容问题。

场景2：documentElement.scrollTop或者document.body.scrollTop 一直为0的情况 产生根本原因还是因为给没有scrollTop的元素设定了该值，直接原因是因为浏览器兼容问题。

document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset

1 解决方法：在上面三个元素中逐一尝试，总有一款可以设置上。

到此这篇关于vue页面设置滚动失败的解决方案(scrollTop一直为0)的文章就介绍到这了,更多相关vue页面滚动失败内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli

  • vue如何监听页面的滚动的开始和结束

    目录 监听页面的滚动的开始和结束 vue监听页面滚动事件 方法:监听滚动实现 问题:监听不到页面的滚动 监听页面的滚动的开始和结束 export default { data() { return { oldScrollTop: 0, //记录上一次滚动结束后的滚动距离 scrollTop: 0 // 记录当前的滚动距离 } }, watch: { scrollTop(newValue, oldValue) { setTimeout(() => { if(newValue == window.s

  • vue实现页面滚动到底部刷新

    本文实例为大家分享了vue实现页面滚动到底部刷新的具体代码,供大家参考,具体内容如下 h5页面 <script> var app = new Vue({ el: '#app', data: { swiper: null, carousel: [], promotion: [], cates: [], //设置size初始为10 size:10, }, mounted: function () { //定义that用that.size获取size的值 var that=this; getProm

  • vue添加锚点,实现滚动页面时锚点添加相应的class操作

    第一步,给vue页面添加锚点 .orange{ color: #f97910; } <template> <div class="productDetail" ref="content"> <div class="tabbar"> <div @click.prevent="tabclick(index)" v-for="(item,index) in productTile&

  • Vue滚动页面到指定位置的实现及避坑

    目录 Vue滚动页面到指定位置 方法1 方法2 方法3 避坑指南 滚动页面到一定距离后固定 Vue滚动页面到指定位置 在Vue中,有三种方式可以实现H5页面滑动至指定位置 方法1 //先获取目标位置距离 mounted() {   this.$nextTick(() => {      setTimeout(() => {         let targetbox= document.getElementById('targetbox');         this.target= targ

  • vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue项目中,需要实现点击对应按钮,滚动到对应页面位置,下面分享一个简单实用的方法 原文地址 http://www.sharedblog.cn/?post=205 <template> <div class="box"> <div class="btn"> <span @click="Submit(1)">按钮一</span> <span @click="Submit(2

  • vue监听页面滚动到某个高度触发事件流程

    目录 监听页面滚动到某个高度触发事件 动态监听页面滚动高度 监听页面滚动到某个高度触发事件 methods: {    showIcon() {       if (         !!document.documentElement.scrollTop &&         document.documentElement.scrollTop > 200        ) {                         页面高度大于200执行操作         } else

  • IDEA中Maven依赖下载失败的完美解决方案

    使用IDEA进行Maven项目开发时,时不时会遇到pom.xml报错的情况,其中很大概率是因为Maven依赖的jar包下载失败,找来找去也没有找到是什么问题,困扰了很多程序猿,这里给出IDEA中Maven依赖下载失败解决方案,给大家参考,实测有用. 文章目录首先检查网络有没有问题,确定网络没有问题,请看下一步多次点击重新导入Maven依赖的按钮设置自动导入Maven依赖在IDEA中找到Maven的配置文件的地址,然后检查配置的远程仓库或者镜像有没有问题如果上面几步都没有解决问题,可以使用以下脚本

  • Windows中Mysql启动失败的完美解决方案

    Windows中Mysql启动失败的完美解决方案

    目录 一.问题描述 1.1.mysql服务启动失败1 1.2.mysql服务启动失败2 二.针对一的解决办法 2.1.问题解析 2.2.解决办法 2.2.1.存在数据的情况 三.数据恢复 3.1.mysql数据恢复 [Mysql问题]Windows中Mysql启动失败与数据恢复 一.问题描述 1.1.mysql服务启动失败1 使用命令启动:net start mysql 结果如下: 在windows计算机管理->服务->MySQL57强制启动,结果如下: 1.2.mysql服务启动失败2 通过

  • 重装MySQL最后一步失败的完美解决方案(经验总结)

    相信大家使用MySQL都有过重装的经历,要是重装MySQL基本都是在最后一步通不过,除非重装操作系统,究其原因就是系统里的注册表没有删除干净.下面是我总结的一点经验,都是血的教训: MYSQL出现问题,重装是非常郁闷的事情,很是崩溃,搞一次需要记录一次 安装的时候,有时候会出现could not start the service mysql error:0 提示错误. 解决步骤: 1.开始-MySQL-MySQL Server 5.1-MySQL Server Instance Config

  • Vue路由回退的完美解决方案（vue-route-manager）

    目录 路由管理器 背景 入门 解决问题 Methods 总结 路由管理器 记录每次跳转的vue-route name, 内置了一些处理回退的方法, 方便回退到指定页面 背景 笔者所开发的项目中经常遇到各种花式跳转, 例如从引导页的选择操作到最后的提交审核中间会经过无数页面, 甚至中间所做的操作不同也会导致最后回退深度不同 假设项目中 起始点都是选择页, 最终都会抵达提交页 并且都会返回到最初的页面(选择页) 选择页 --> B --> C --> 提交页  情况一 从选择到提交 中间经历

  • vue安装less-loader依赖失败问题及解决方案

    vue安装less-loader依赖失败问题及解决方案

    目录 vue安装less-loader依赖失败 安装less-loader报错 unable to resolve dependency tree 降低 less-loader 版本 vue安装less-loader依赖失败 vue可视化面板中提供的less-loader依赖安装失败,导致以下代码识别不了,出现错误信息 因为该项目开发用的脚手架是3.11.0版本的,不能用vue可视化面板中提供的less-loader10.1.0,所以要另外要下载低版本的less-loader,比如5.0.0的.

  • 用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

    问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的.如下面的代码所示: var someData; $.ajax({ url: '/prefix/entity1/action1', type: 'GET' , async: true, contentType: "application/json", success: function (resp) { //do something on response

  • IE6 fixed的完美解决方案

    第一种方法:纯CSS 目前网上有的比较多的是这种解决方案(纯CSS): 复制代码 代码如下: html{overflow:hidden;} body{height:100%;overflow:auto;} #rightform form{position:absolute;right:30px;top50px;} 这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成"浮动"的元素:还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的

  • vue 实现滚动到底部翻页效果(pc端)

    pc端vue 滚动到底部翻页 效果,具体内容如下所示: html: <div class="list" ref="scrollTopList"> <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)"> <span cla

  • vue实现滚动加载的表格

    vue实现滚动加载的表格

    实现效果 码云地址 滚动加载知识储备 参考ant-design-vue中list滚动加载的思路,使用vue-infinite-scroll加上vue-virtual-scroller作为解决方案. 组件封装 因为整个系统使用的框架是ant-dsign-vue,所以组件封装的变量命名风格尽可能的与a-table保持一致. 1. 组件命名 XScrollTable.vue 2. 提供的props 必填字段: dataSource -- 数据源 columns -- 表格展示的列信息,插槽用法和a-t

  • 简单方法实现Vue 无限滚动组件示例

    目录 1. 前言 2. 整体思路 开始 3. 钩子函数 3.1 获取偏移初始位置的像素值 3.2 获取开始滚动和结束滚动的钩子函数 4. 完整代码 1. 前言 对于列表类型的大量数据,前端展示往往采用 分页 和 无限滚动 的方式来展示,对于用户来说,鼠标滚轮和触控屏使滚动行为要比点击更快更容易. element-plus 组件库提供了简单的 vue 指令,就可以轻易的实现 但是 element-plus 只支持无限向下滚动,不支持无限向上滚动,同时也没缺少丰富的 钩子函数,我们无法在这个基础上更

随机推荐

其他