解决scrollLeft、scrollTop为0

最近遇到从外面点之后弹框，显示当前是第几组，并且滚动到当前位置的需求
遇到的问题：第一次获取可以获取的scrollWidth，第二次打开弹框就是0，并且设置scrollLeft也不起作用

解决办法：
延时获取dom元素，【可以把document换成this.$el】
需要nextTick

在这之前我们可以先检查一下是不是当前dom元素可以滚动，如果输出的值有变化那么dom元素就没有问题

window.addEventListener('scroll', () => {let matchContent = this.$el.querySelector('.match-name-option')console.log(matchContent.scrollLeft)
}, true)

public lastName () {if (this.activeIndex-- === 0) {this.activeIndex = 0;}this.$emit('index-change', this.activeIndex);this.scrollLeft();}public nextName () {if (this.activeIndex++ === this.relationGroupOptions.length - 1) {this.activeIndex = this.relationGroupOptions.length - 1;}this.$emit('index-change', this.activeIndex);this.scrollLeft();}private scrollLeft () {this.$nextTick(() => {setTimeout(() => {const matchContent = this.$el.querySelector('.match-name-option');if (matchContent) {matchContent.scrollLeft = (matchContent.scrollWidth / this.relationGroupOptions.length * this.activeIndex);}}, 10)});}

补充
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

解决scrollLeft、scrollTop为0相关推荐

解决ajax的status=0问题
解决ajax的status=0问题参考文章: (1)解决ajax的status=0问题 (2)https://www.cnblogs.com/Jimmy009/archive/2011/12/25/ ...
成功解决成功解决return _iterencode(o, 0) ValueError: Circular reference detected
成功解决成功解决return _iterencode(o, 0) ValueError: Circular reference detected 目录解决问题解决思路解决方法解决问题 retu ...
成功解决ValueError: With n_samples=0, test_size=0.3 and train_size=None, the resulting train set will be
成功解决ValueError: With n_samples=0, test_size=0.3 and train_size=None, the resulting train set will be ...
成功解决TypeError: sequence item 0: expected str instance, list found
成功解决TypeError: sequence item 0: expected str instance, list found 目录解决问题解决思路解决方法解决问题 TypeError: ...
成功解决TypeError: sequence item 0: expected str instance, bytes found
成功解决TypeError: sequence item 0: expected str instance, bytes found 目录解决问题解决思路解决方法解决问题 TypeError: ...
docker php 乱码,如何解决docker安装zabbix5.0界面乱码
如何解决docker安装zabbix5.0界面乱码? zabbix图形界面乱码如下: 解决: docker部署zabbix-web和源码安装zabbix-web一样,字体都是存储在/usr/share ...
解决重启VCSA 6.0，访问vsphere web client提示：503 Service Unavailable错误
解决重启VCSA 6.0,访问vsphere web client提示:503 Service Unavailable错误 https://www.pianshen.com/article/93205 ...
解决重启VCSA 6.0提示：503 Service Unavailable错误
解决重启VCSA 6.0提示:503 Service Unavailable错误有时候在重启VCSA6.0之后,可能半天无法登录到VCSA的vSphere Web Client,登录界面提示如下图所 ...
关于解决Server Tomcat v9.0 Server at localhost failed to start的问题
关于解决Server Tomcat v9.0 Server at localhost failed to start的问题参考文章: (1)关于解决Server Tomcat v9.0 Server ...
一种解决Android studio 3.0 Build报错的方法
一种解决Android studio 3.0 Build报错的方法参考文章: (1)一种解决Android studio 3.0 Build报错的方法 (2)https://www.cnblogs. ...

解决scrollLeft、scrollTop为0

解决scrollLeft、scrollTop为0相关推荐

最新文章

热门文章