Javascript: I am trying to create scroll while user scrolling on the page, but i keep having NaN error for 'moveImaeCalc'

Question

I'd like to trigger scrolling of a div with overflowing content by scrolling anywhere on the page, not just by moving the mouse and clicking within the div. Also, I'd like to hide the div's scrollbar such that only the page's scrollbar is visible.

let viewportHeight = $("body").innerHeight();

let contTopPositionArray = [];
let imageHeightArray = [];
let containerHeightArray = [];
let containerIDArray = [];



jQuery(window).on("scroll", function() {
  var scroll = $(window).scrollTop();
  //console.log(scroll);
  containerIDArray.forEach((element, index) => {
    var tempOffset = $('#' + element).offset();
    console.log(tempOffset.top)
    if (tempOffset.top < scroll + viewportHeight && tempOffset.top + containerHeightArray[index] < scroll) {
      console.log('i can see you', element);
    }
  });
});

$('.container').each(function(index, el) { //vrti funkciju za svaki conteiner na stranici
  var contPost = $(this).offset();
  contTopPositionArray.push(contPost.top); // skuplja gde se nalazi conteiner sa slikom od vrha stranice, tj njegova top pozicija
  console.log(contTopPositionArray);
  var imgageHeigth = $('.col2 img', this).height();
  imageHeightArray.push(imgageHeigth); // skuplja visinu slike
  console.log(imageHeightArray);
  var conteinerHeigth = $('.col2', this).height();
  containerHeightArray.push(conteinerHeigth); // skuplja koliko je veliki div gde se slika nalazi
  containerIDArray.push($(this).attr('id')); // skuplja koji je ID za red
  console.log(containerIDArray);
  var moveImageCalc = -(imageHeightArray[index] - conteinerHeigth[index] * ((imageHeightArray[index] - conteinerHeigth[index]) / viewportHeight));
  console.log(moveImageCalc)
});



jQuery(window).on("scroll", function() {
  var scroll = $(window).scrollTop();
  //console.log(scroll);
  containerIDArray.forEach((element, index) => {
    var tempOffset = $('#' + element).offset();
    console.log(tempOffset.top);
    if (tempOffset.top < scroll + viewportHeight && tempOffset.top + containerHeightArray[index] < scroll) {
      // mesto 500 treba da napravim funckiju koja ce automatski da racuna visinu slike i skrola kroz nju
      $('#' + element + ' img').css('top', moveImageCalc);
      console.log('i can see you', element);
    }
  });
});


var scroll =
  window.requestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
var elementToShow = document.querySelectorAll(
  ".col2"
);

function loop() {
  elementToShow.forEach(function(element) {
    if (isElementInViewport(element)) {
      element.classList.add("class");
    } else {
      element.classList.remove("class");
    }
  });
  scroll(loop);
}

loop();

function isElementInViewport(el) {
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0 && rect.bottom >= 0) ||
    (rect.bottom >=
      (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <=
      (window.innerHeight || document.documentElement.clientHeight)) ||
    (rect.top >= 0 &&
      rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight))
  );
}

.container {
  max-width: 80rem;
  height: 80vh;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 4rem;
}

.col1 {
  flex: 0 0 45%;
}

.col2 {
  flex: 1;
  height: 200px;
  overflow: scroll;
  position: relative;
}

.col2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="first">
  <div id="scrollMeToo" class="col1">
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem deleniti ipsam rem fugit facilis. Quaerat aliquid omnis sunt praesentium laudantium rem unde natus deleniti amet, labore maiores eos ratione doloribus at provident autem facere?</p>
    <a href="#" class="btn">Click</a>
  </div>
  <div class="col2">
    <img src="https://picsum.photos/200/300" alt="">
  </div>
</div>

<div class="container " id="second">
  <div class="col1">
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem deleniti ipsam rem fugit facilis. Quaerat aliquid omnis sunt praesentium laudantium rem unde natus deleniti amet, labore maiores eos ratione doloribus at provident autem facere?</p>
    <a href="#" class="btn">Click</a>
  </div>
  <div class="col2">
    <img src="https://picsum.photos/200/300" alt="">
  </div>
</div>

<div class="container" id="tird">
  <div class="col1">
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem deleniti ipsam rem fugit facilis. Quaerat aliquid omnis sunt praesentium laudantium rem unde natus deleniti amet, labore maiores eos ratione doloribus at provident autem facere?</p>
    <a href="#" class="btn">Click</a>
  </div>
  <div class="col2">
    <img src="https://picsum.photos/200/300" alt="">
  </div>
</div>

<div class="container" id="fourth">
  <div id="scrollMeToo" class="col1">
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem deleniti ipsam rem fugit facilis. Quaerat aliquid omnis sunt praesentium laudantium rem unde natus deleniti amet, labore maiores eos ratione doloribus at provident autem facere?</p>
    <a href="#" class="btn">Click</a>
  </div>
  <div class="col2">
    <img src="https://picsum.photos/200/300" alt="">
  </div>
</div>

(also at https://codepen.io/Pavle1993/pen/poreRjW)

If anyone knows an easier solution I would be grateful to share with me. Thanks.

var moveImageCalc = - (imageHeightArray[index] -  conteinerHeigth[index] * ((imageHeightArray[index] -  conteinerHeigth[index])/viewportHeight));
console.log(moveImageCalc) // NaN

you define `moveImageCalc` as local vairable, thus you cant use it outside of the local scope — Alan Yu, Oct 29 '21 at 08:06

Eazicoding · Accepted Answer · 2021-10-29T14:45:23.090

You have a semantic error in your code. It is illegal to run conteinerHeight[index], where conteinerHeight is a number value. I am pretty sure you meant containerHeightArray[index]. See the corrected code snippet below:

$('.container').each(function(index, el) { //vrti funkciju za svaki conteiner na stranici
  var contPost = $(this).offset();
  contTopPositionArray.push(contPost.top); // skuplja gde se nalazi conteiner sa slikom od vrha stranice, tj njegova top pozicija
  console.log(contTopPositionArray);
  var imgageHeigth = $('.col2 img', this).height();
  imageHeightArray.push(imgageHeigth); // skuplja visinu slike
  console.log(imageHeightArray);
  var conteinerHeigth = $('.col2', this).height();
  containerHeightArray.push(conteinerHeigth); // skuplja koliko je veliki div gde se slika nalazi
  containerIDArray.push($(this).attr('id')); // skuplja koji je ID za red
  console.log(containerIDArray);
  var moveImageCalc = -(imageHeightArray[index] - containerHeigthArray[index] * ((imageHeightArray[index] - containerHeigthArray[index]) / viewportHeight));
  console.log(moveImageCalc)
});

In regards to your question:

Also, I'd like to hide the div's scrollbar such that only the page's scrollbar is visible.

See answers to this stackOverflow question.

Javascript: I am trying to create scroll while user scrolling on the page, but i keep having NaN error for 'moveImaeCalc'

1 Answers1