vue设置元素的scrollTop属性的值进行页面滚动，在安卓手机上不生效

最新推荐文章于 2023-03-01 15:41:14 发布
最新推荐文章于 2023-03-01 15:41:14 发布
阅读量2.5k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37673306/article/details/104323027
版权

试了vue和原生js的各种页面滚动的方法均不生效，最后引入了jquery插件，使用jquery的页面滚动方法就可以了，我想这可能归结与jquery的兼容性做的比较好吧

$("body,html").scrollTop(100);

欢迎关注「不出户」公众号 

在公众号回复「python」，获取全套python学习资源。

在公众号回复「vue」，领取vue核心教程

在公众号回复「react」，领取react全套教程

在公众号回复「angular」，领取angular学习资源

在公众号回复「算法」，领取算法学习教程

在公众号回复「nodejs」，领取nodejs学习教程，更有更多精品资源敬请期待

欢迎关注不出户，让你足不出户爱好学习

木豪末
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Failed to execute 'scrollTo' on 'Window': No function was found that matched the signature provided.
pyf18809486818的博客
01-07 5869
vue项目在本地使用scrollTo这个方法的时候没有问题，部署的时候报这个错误。 window.scrollTo(0,200);//同scrollTo(0,200),scroll(0,200)默认为window调用。 toTop(){//跳转顶部 //scrollTo(0,800) //scroll(0,0) window.scrollTo({ ...
解决方案: vue 使用 scrollTo 方法，在安卓环境下报错
CSDN前端知识共享
11-28 1145
vue 使用 scrollTo 方法，在安卓环境下报错 // 安卓不支持 window.scrollTo(x-scoller,y-scroller) 解决方案 // 使用 scrollLeft、scrollTop window.scrollLeft = x-scoller window.scrollTop = y-scoller ...
vant-list使用，请求接口之后会多几次load加页面
qq_43468165的博客
03-01 2420
5页（极端假设）的情况下，如果你的内容小于了可是窗口，第一导致load不能触发，第二侥幸可视窗口高度本来就小，能滚到底load触发了，你可能在tab0的时候成功获取了page=2的内容了，但在切换tab时候就开始不受控值乱掉接口了。是因为产品在设置时候是会考虑到，触底加载事件的触发的。那上面描述这种情况，tab切换了，又进行自动加载数据的情况前端就不要想着制止了（更全面的来说，可控但是真没必要前端增加额外参数来控制了），因为van-list 也是害怕你填不满页面，实现不了下一步滚动在帮你加载充足数据上来。
vant 框架van-list重复触发加载函数的问题
热门推荐
木豪末的博客
03-07 1万+
在使用van-list组件的时候，为了隐藏ios手机右侧的滚动条，我给了组件一个overflow-x:hidden属性，官方说这个属性会导致重复触发van-list的加载，但是我去掉这个属性仍然不管用，而且这个属性又是必须保留的，最后我又给了他一个固定的高度，就不会重复触发加载了，注意一定要是固定的高度，设置height:100%仍然是不管用的，记录一下这个问题 ...
【React深入】setState的执行机制
weixin_34100227的博客
02-23 407
一.几个开发中经常会遇到的问题 以下几个问题是我们在实际开发中经常会遇到的场景，下面用几个简单的示例代码来还原一下。 1.setState是同步还是异步的，为什么有的时候不能立即拿到更新结果而有的时候可以? 1.1 钩子函数和React合成事件中的setState 现在有两个组件 componentDidMount() { ...
vant的list 一直请求数据,van-list 的load方法不断连续的调用方法请求数据，诡异现象。完整解决方案
橙-极纪元-cplvfx-JJY.Cheng
01-31 5754
vant的list 一直请求数据,van-list 的load方法不断连续的调用方法请求数据，诡异现象。完整解决方案
vant-list上拉加载onload事件触发多次
weixin_45121510的博客
10-14 1万+
场景：3个tab页签切换时，调用不同接口，在某一个tab只要翻页到>=2的情况，当它再点击到另一个tab的时候，另外一个tab就会连续调用两次查询接口
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中更改数组中属性,在页面中不生效的解决方法
10-16
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue修改对象的属性值后页面不重新渲染的实例
01-19
最近项目在使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下： HTML页面如下： <div>{{ item.name}} (item.id) type=info>编辑 <p class=el-icon-error v-show=item.tip>
vue进入页面时滚动条始终在底部代码实例
10-17
总结起来，Vue中实现页面加载时滚动条始终在底部，可以通过直接操作DOM元素的`scrollTop`属性或利用第三方库如`better-scroll`。同时，自定义滚动条样式可以提供更好的用户体验。注意，这种方法适用于静态内容，若...
vue 自定义组件切换时刷新
weixin_45977625的博客
09-25 2196
我们在使用vue自定义组件时，常常会遇到切换组件的操作，但是切换组件的时候，如果没有处理好，组件内容就不会刷新。如：标签页下放自定义组件，切换标签时，组件里面的内容不刷新，导致页面停留在上一次的操作。那么我们应该如何来解决这个问题呢？接下来说说我在网上看到的两种方法 一、通过v-if来刷新 当我们在爷辈组件请求后台接口完成后要刷新子孙组件时，我们就可以在爷辈组件使用以下代码,实现子孙组件的刷新（感觉这种方法怪怪的，个人喜欢第二种方法） 上代码： //父组件内容 <child v-if="show"&g
React--组件更新机制&组件性能优化
weixin_53052268的博客
08-04 2310
更加简洁的写法：if nextState.number!1.2过程：父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）4.使用另外一个参数（nextProps）3.避免不必要的重新渲染。...
React componentDidMount执行两次解决方法
张卿闻的博客
09-07 1868
注释掉React.StrictMode组件。
vant-list当页面出先滚动条时会重复加载数据的问题解决
wall 技术日志
12-22 2406
vue 3.0 typescript vant. 1.单个界面刷新没问题：排除组件初始化调用问题 2.主界面滚动条在顶部则不会影响，当主界面下拉时，滚动条位置会影响子界面。 3.问题： 主界面滚动条会影响子界面滚动条 1.跳转前滚动条归为0，无效 2.使用Router的scrollBehavior返回top：0，无效。 3.跟踪发现，scroll事件注册之前和注册之后包括函数被触发时window.scrollY均为0，说明scroll没有被变化，需要找出何时调用了w...
react中在componentDidMount生命周期函数中调用了多个this.setState报错
weixin_44824839的博客
07-14 3009
报错：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。 在componetDidMount中： componentDidMount(): void { var responeceDate:object =[] var pieName:string = 'dayElectric' if(this.props.uri === '/deta.
vant ui 上拉加载分页及tab切换遇到的坑
盼盼大小姐的博客
09-29 956
vant ui 上拉加载分页及tab切换遇到的坑
van-list会多次触发onLoad事件
大把小米的博客
02-24 3558
1.List 初始化后会触发一次 load 事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭。 2.根据有无数据来控制是否展示van-list，因为有时候页面初始化没有数据时vant-list也会触发一次 ...
vant组件库中使用van-list组件中load加载事件触发多次的问题
weixin_49203377的博客
12-03 5750
背景：在使用vant UI组件库的时候，当列表加载到底部的时候，可以结合load加载事件，继续获取下一页的数据 但是和tab切换结合的时候，就会出现问题了，比如第一个tab下面我进行了忘下滑动的滚动事件，然后我再切换到第二个tab下面，这时候，又会自动执行了一遍加载事件（感觉1.应该是刚开始没有数据，然后直接到底部了，所以唤起了load事件2.第一个列表由于往下滑动了，所以滚动条还在刚才滑动下去的位置，所以直接到底了又触发了load加载事件） 所以针对这两个问题 做了以下处理 1.首先页面上 loa
vue中设置scrolltop不生效
最新发布
06-28
### 回答1： 可能是因为你没有正确地设置scrolltop属性。你可以尝试以下几个步骤： 1. 确保你已经正确地引入了Vue.js库。 2. 在你的Vue组件中，使用ref属性来获取你想要设置scrolltop的元素。 3. 在mounted钩子函数中，使用$refs来获取元素的实例，并设置scrolltop属性。 例如： ``` <template> <div ref="myDiv"> <!-- your content here --> </div> </template> <script> export default { mounted() { this.$refs.myDiv.scrollTop = ; } } </script> ``` 如果你仍然遇到问题，请提供更多的代码和错误信息，以便我们更好地帮助你解决问题。 ### 回答2： 在Vue中设置scrollTop不生效可能有几个原因： 1. 错误的元素引用：vue中的dom操作需要通过Vue的$ref来引用对应的dom元素，而不是直接使用document.getElementbyId或者其他原生js方式来获取dom。如果引用的dom元素不正确，scrollTop设置就无效。 解决方法：确保$ref是正确引用dom元素的。 2. 对应的元素还未渲染完毕：可能vue组件还未完全渲染完毕，此时对该组件中的dom元素位置进行设置scrollTop是无效的。 解决方法：在mounted生命周期函数中使用vue提供的nextTick，等待dom元素渲染完毕再进行scrollTop的设置。 3. 父元素overflow属性问题：在vue组件中进行scrollTop设置时，如果存在继承滚动条的父元素，而该父元素的overflow属性为hidden，那么子元素的scrollTop设置就无效了。 解决方法：将父元素的overflow属性设置为auto或scroll。 4. 非阻止默认事件导致的scrollTop不生效：在vue中，通过@click等事件监听器中进行scrollTop设置时，如果没有通过event.preventDefault()阻止默认事件的触发，则scrollTop设置可能无效。 解决方法：在事件监听器中添加event.preventDefault()来阻止默认事件的触发。 综上所述，vue中设置scrollTop不生效可能有多种原因，需要仔细检查代码，确保代码没有问题后再寻找其他原因，以确保scrollTop设置生效。 ### 回答3： Vue中设置scrollTop不生效可能是因为以下几个原因： 1. Vue中dom的操作需要在页面渲染后才能生效，所以需要在mounted或者$nextTick中进行相关操作。 2. 必须将scrollTop赋值给dom节点的scrollTop，而不是Vue中的data属性。 3. 如果是组件内部设置scrollTop，需要将ref属性绑定到对应的dom节点上，并通过this.$refs.xxx来获取dom节点并进行scrollTop的赋值操作。 4. 如果是在Vue Router中进行页面跳转后再设置scrollTop，需要添加一个watch监听，等到页面渲染完毕后进行scrollTop的赋值操作。 以下是一个设置scrollTop的示例代码： ```javascript mounted() { this.$nextTick(() => { let content = document.getElementById('content'); if (content) { content.scrollTop = 0; } }) } ``` 其中，content代表要设置scrollTop的dom节点，需要通过Vue Router进行页面跳转后再设置scrollTop的话，可以在watch中添加以下代码： ```javascript watch: { $route(to, from) { this.$nextTick(() => { let content = document.getElementById('content'); if (content) { content.scrollTop = 0; } }) } } ``` 通过以上方法来设置scrollTop应该可以解决Vue中scrollTop不生效的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木豪末

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值