CODEWITHSUNDEEP
javascripthtmlcss
BimaPria_4420
BimaPria_4420

Reputation: 75

Get Scroll position inside Element HTML not work in Vanilla JS

I want to get current Horizontal scroll position, however the result is always NaN.

This code its work when using window not wrapper

What should i do ?

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

Here my Fiddle

Upvotes: 0

Views: 808

Answers (2)

TechySharnav
TechySharnav

Reputation: 5084

It is because, window.ScrollX would get the position for window's horizontal scroll position. In order to get wrapper's scroll position use wrapper.scrollLeft to get horizontal position, or wrapper.scrollTop to get vertical position.

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


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

Upvotes: 3

StepPen-codes
StepPen-codes

Reputation: 280

element.scrollTop is what you need.

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>

Upvotes: 1

Related Questions