获得元素HTML中的滚动位置在Vanilla JS中不工作

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));
});

我的小提琴

Answer 1

element.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>

​

Answer 2

因为，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));
});