无法从Vue Computed属性访问element.scrollLeft位置?如何

Question

我无法从Vue中访问窗口的scrollLeft值。我尝试过使用方法和计算属性。我也尝试过直接访问，通过Refs请参阅下面的小提琴。

let el  = document.getElementsByClassName("myContainer")
if (el != null) {
return el.scrollLeft
} else {
return 'unknown'
}

https://jsfiddle.net/oj1bu5nt/

Answer 1

当我们使用文档获取元素时，我们需要使用第0个索引来访问该元素。

将您的if条件更新为：

if (el[0] != null) {
return el[0].scrollLeft
}

Answer 2

在这种情况下使用$ref进行计算是不起作用的，因为。。。

正如这里所说：https://forum.vuejs.org/t/watching-refs-item-for-change-in-clientheight/60039/2与您的问题直接相关的地方。。。

Vue只对自己的数据做出反应，不能对DOM元素做出反应属性更改。

所以监视或计算属性在这里都不起作用。您可以做的是监听滚动事件并将值分配给变量，例如：

<div ref="myContainer" .... v-on:scroll="getScroll()">

和功能：

getScroll() {
this.scroll = this.$refs.myContainer.scrollLeft;
}

其中当然有一个名为scroll的数据变量。

你的小提琴

或者，你可以按照提供的另一个答案：(