JavaScript. процент прокрутки страницы

Question

Я хочу найти процент, насколько я прокрутил страницу

window.addEventListener("scroll", (evt)=>{
    changeActiveNavPosition();
})

function changeActiveNavPosition() {
    let mainContentHeight = document.querySelector('.main-content').offsetHeight;
    let windowScrollProcent = window.pageYOffset/mainContentHeight*100;
    console.log( mainContentHeight + "px --- " + window.pageYOffset + " --- "+windowScrollProcent +"%")
}

Но из-за размеров полосы прокрутки, когда я прокручиваю в самый низ страницы - мой код выдаёт максимум 80% (в зависимости от размеров окна (оттого и размеров скролла))

Как сделать так чтобы при прокрутке в самый низ страницы у windowScrollProcent был 100%, вне зависимости от размеров окна, контента, etc

Answer 1

Отнимите высоту экрана

$(document).ready(function() {
  let windowHeight = $(window).height();
  console.log('windowHeight' + windowHeight)
  window.addEventListener("scroll", (evt) => {
    changeActiveNavPosition();
  })

  function changeActiveNavPosition() {

    let mainContentHeight = document.querySelector('body').offsetHeight - windowHeight;
    let windowScrollProcent = window.pageYOffset / mainContentHeight * 100;
    console.log(mainContentHeight + "px --- " + window.pageYOffset + " --- " + windowScrollProcent + "%")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

JavaScript. процент прокрутки страницы

Ответы (1 шт):