Breaking News: Grepper is joining You.com. Read the official announcement!

Scroll into view Javascript

Dillon Jurgens answered on August 7, 2022 Popularity 10/10 Helpfulness 2/10

answer Scroll into view Javascript

related Scroll element into view javascript

Scroll into view Javascript

Comment

(function() {
  var elements;
  var windowHeight;

  function init() {
    elements = document.querySelectorAll('.hidden');
    windowHeight = window.innerHeight;
  }

  function checkPosition() {
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var positionFromTop = elements[i].getBoundingClientRect().top;

      if (positionFromTop - windowHeight <= 0) {
        element.classList.add('fade-in-element');
        element.classList.remove('hidden');
      }
    }
  }

  window.addEventListener('scroll', checkPosition);
  window.addEventListener('resize', init);

  init();
  checkPosition();
})();

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.dev-tips-and-tricks.com

Tags: javascript scroll view

Link to this answer
Share Copy Link

Contributed on Aug 07 2022

Dillon Jurgens

0 Answers Avg Quality 2/10

Closely Related Answers

Scroll element into view javascript

Comment

var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: element

Link to this answer
Share Copy Link

Contributed on Feb 10 2023

html-hacker

0 Answers Avg Quality 2/10

Scroll into view Javascript

Contents

More Related Answers

Scroll into view Javascript

Closely Related Answers

Scroll element into view javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.