在元素HTML中获取滚动位置在VanillaJS中不起作用

Question

我想获得当前的水平滚动位置，但结果总是NaN。

此代码在使用window而非wrapper时的工作

我该怎么办？

<div class="container mt-5">
<span id="current view"> 0 </span>
<div class="my-row m-0" id="lorem">
<div class="item col-8" id="data_1">A</div>
<div class="item col-8" id="data_2">B</div>
<div class="item col-8" id="data_3">C</div>
<div class="item col-8" id="data_4">D</div>
<div class="item col-8" id="data_5">E</div>
<div class="item col-8" id="data_6">F</div>
<div class="item col-8" id="data_7">G</div>
<div class="item col-8" id="data_8">H</div>
</div>
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
</div>

.my-row{
width: 100%;
height: 50vh;
background: #34495e;
overflow: auto;
display: flex;
}
.my-row .item{
width: 250px;
height: 450px;
}
.my-row .item#data_1{
background: var(--danger);
}
.my-row .item#data_2{
background: salmon;
}
.my-row .item#data_3{
background: royalblue;
}
.my-row .item#data_4{
background: var(--primary);
}
.my-row .item#data_5{
background: var(--info);
}
.my-row .item#data_6{
background: greenyellow;
}
.my-row .item#data_7{
background: limegreen;
}
.my-row .item#data_8{
background: var(--success);
}

let wrapper = document.querySelector('#lorem');
let lastKnownScrollPosition = 0;
/* wrapper[0].scrollLeft = 0; */
wrapper.addEventListener('scroll', function(e) {
lastKnownScrollPosition = wrapper.scrollX;
console.log(parseInt(lastKnownScrollPosition));
});

这是我的Fiddle

Answer 1

这是因为，window.ScrollX将获得窗口水平滚动位置的位置。为了获得包装器的滚动位置，使用wrapper.scrollLeft获得水平位置，或者使用wrapper.scrollTop获得垂直位置。

let wrapper = document.querySelector('#lorem');
let lastKnownScrollPosition = 0;

wrapper.addEventListener('scroll', function(e) {
lastKnownScrollPosition = wrapper.scollLeft;
console.log(parseInt(lastKnownScrollPosition));
});

Answer 2

元素。scrollTop正是您所需要的。

let wrapper = document.querySelector('#lorem');
let lastKnownScrollPosition = 0;
wrapper.addEventListener('scroll', function(e) {
lastKnownScrollPosition = e.target.scrollTop; 
console.log(parseInt(lastKnownScrollPosition));
});

.my-row{
width: 100%;
height: 50vh;
background: #34495e;
overflow: auto;
display: flex;
}
.my-row .item{
width: 250px;
height: 450px;
}
.my-row .item#data_1{
background: var(--danger);
}
.my-row .item#data_2{
background: salmon;
}
.my-row .item#data_3{
background: royalblue;
}
.my-row .item#data_4{
background: var(--primary);
}
.my-row .item#data_5{
background: var(--info);
}
.my-row .item#data_6{
background: greenyellow;
}
.my-row .item#data_7{
background: limegreen;
}
.my-row .item#data_8{
background: var(--success);
}

<div class="container mt-5">
<span id="current view"> 0 </span>
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<br class="mt-5 mb-5">.
<div class="my-row m-0" id="lorem">
<div class="item col-8" id="data_1">A</div>
<div class="item col-8" id="data_2">B</div>
<div class="item col-8" id="data_3">C</div>
<div class="item col-8" id="data_4">D</div>
<div class="item col-8" id="data_5">E</div>
<div class="item col-8" id="data_6">F</div>
<div class="item col-8" id="data_7">G</div>
<div class="item col-8" id="data_8">H</div>
</div>
</div>