CODEWITHSUNDEEP
javascript
Brady
Brady

Reputation: 763

Pure Javascript, How to detect if scrollTop will scroll to the bottom of the page?

I have a function which basically runs when an arrow with the class 'downArrow' is click. The function will find the parent of that arrow then find the next sibling with a class of 'scrollPoint' and then scroll to that area. Everything I just described works fine for me the issue I am having is if the bottom of the document hits the bottom of my viewport before the top of the element I am scrolling to hits the top of the viewport it just glitches out and scrolls back to the very top of the document. So I think What I need to do is detect if this scenario is going to happen and then set a max scroll value so the scroll functions doesnt try to scroll passed the bottom of the document.

How would I detect if the bottom of the document will be visible on the viewport and prevent from scrolling that far?

I will provide my code below in hopes that it will help, if you have any questions or need more clarification of what I am asking for just let me know. Thanks

This is my component although for what i am asking only the scrollTo function is really relevant 

exports.init = init;
function init (options){
    var downArrows = document.querySelectorAll(options.selector);
    downArrows.forEach(triggerScrollHandler);
}

function scrollTo(element, to, duration) {
    if (duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

function scrollHandler (e) {
    e.preventDefault();
    var el         = this,
        scrollPoint = findSibling(el),
        offsetVal  = scrollPoint.getBoundingClientRect(),
        windowOffset = window.pageYOffset;

    offsetVal = offsetVal.top + windowOffset - 1;
    scrollTo(document.body, offsetVal, 600);
}

function findParent(el) {

    while (el && el.parentNode) {
        el = el.parentNode;
        if (el.tagName) {
            return el;
        }
    }
  return null;
}

function findSibling (el) {
    var parent = findParent(el),
        siblings = document.querySelectorAll('.scrollPoint'),
        scrollTo;
    siblings.forEach(function (currentSib, i) {
        if(scrollTo == 'found'){
            scrollTo = currentSib;
        }
        if(currentSib == parent){
            scrollTo = 'found'
        }
    });

    return scrollTo;
}

function triggerScrollHandler (el) {
    el.addEventListener('click', scrollHandler);
}

And this is where I call in my app.js

var scrollHandler = require('./components/scrollHandler.js');

(function(){
    scrollHandler.init({
        selector: '.downArrow'
    });
}())

Upvotes: 2

Views: 1967

Answers (1)

Paul Walczewski
Paul Walczewski

Reputation: 1336

Put this in your scroll listener:

if (document.body.scrollHeight <= document.body.scrollTop + document.body.clientHeight ){
            console.log('scrolled to bottom');
}

Simple, pure JS solution :)

Upvotes: 3

Related Questions