scrollTop设置不生效

Question

1.父组件包含子组件，子组件高度超出，给父组件设置了overflow-y:scroll
2.给父组件添加滚动监听事件，是可以获取到e.targe.scrollTop的，也是说明 滚动条设置对象没有错。
在事件里设置 e.targe.scrollTop = 100，有用。
3.父组件的scrollHeight是700
4.是在mounted方法里，调用了某个方法，然后在这个方法里获取元素并设置的scrollTop，所以也可以排除是元素还没获取到的原因。
但是给它设置scrollTop=100 或者用 scrollTo(100，0)都没有效果，打印出来都是0

感觉排除了网上能查到的所有问题，还是解决不了。请问大家还有什么没注意到的吗？

Answer 1

1. 异步更新问题： Vue.js的响应式系统可能会导致某些属性的变化不会立即生效。确保你设置scrollTop的代码是在Vue.js异步更新完成之后执行的，可以使用this.$nextTick来确保在下次DOM更新循环之后再执行操作。

mounted() {
  this.$nextTick(() => {
    // 在这里设置scrollTop
    this.$refs.parentElement.scrollTop = 100;
  });
}

1. 滚动容器的高度问题： 父组件的高度如果是通过内容撑开的，确保它的高度确实超过了滚动容器的高度，否则即使设置scrollTop也不会生效。你提到了父组件的scrollHeight是700，但如果父组件的内容并没有超过这个高度，那么滚动也不会发生。

2. 检查样式表和布局： 确保样式表中没有其他规则影响了滚动容器的样式，比如父组件设置了overflow: hidden。此外，确保父组件和子组件的样式布局没有影响到滚动容器的正确工作。

3. 事件监听的绑定问题： 请确保滚动监听事件绑定在正确的DOM元素上。可能有情况下事件监听没有绑定在你预期的元素上，导致无法正确获取滚动位置。

4. 浏览器兼容性问题： 有时候不同浏览器对于滚动操作的处理会有细微的差异，可能会导致一些不一致的行为。你可以尝试在不同的浏览器上测试，看看是否有类似的问题。