0

What I am trying to do is detect when I've reached to the bottom. From c_g.scrollTop I get some value 59 when I've reached to the bottom. While the getHeight() is 800px.

How do I interpret this value, and how do I know I've reached for example 500px?

Is my approach cross-browser compatible too?

<script type="text/javascript">

    function getWidth() {
        return Math.max(
            document.body.scrollWidth,
            document.documentElement.scrollWidth,
            document.body.offsetWidth,
            document.documentElement.offsetWidth,
            document.documentElement.clientWidth
        );
    }
    function getHeight() {
        return Math.max(
            document.body.scrollHeight,
            document.documentElement.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.offsetHeight,
            document.documentElement.clientHeight
        );
    }

    var w_threshold = 800,
        w, h, s_t, c_cmbo, c_diff,
        c_h = document.querySelector('div#c_h')
        c_c = document.querySelector('div#c_c'),
        c_s = document.querySelector('div#c_s'),
        c_g = document.querySelector('div#c_g');

    document.querySelector('div#c_g').addEventListener('scroll', eventScroll);
    document.querySelector('div#c_g').addEventListener('wheel', eventScroll);
    document.querySelector('div#c_g').addEventListener('touchmove', eventScroll);

    refresh();

    function refresh() {
        w = getWidth();
        h = getHeight();
        c_diff = Math.round(((h-c_m.offsetHeight)/((h+c_m.offsetHeight)/2)*100));
        console.log('difference = '+c_diff);

        eventScroll();
    }

    function eventScroll() {
        if(w<=w_threshold){

            if(s_t != c_g.scrollTop) {
                s_t = c_g.scrollTop;
                console.log('- scrollTop = '+s_t);
            }
        } else {
            c_m.style.marginBottom = 0+'px';
        }       
    }

</script>

HTML structure:

<body>
<div id="c_g">

    <div id="c_m">
        <div class="shadow"></div>
        <div id="c_h">

        </div>

        <div id="c_c">
            <ul class="promo">
            </ul>   
        </div>

        <div id="c_s">
        </div>

    </div>
</div>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nikk
  • 7,384
  • 8
  • 44
  • 90
  • See https://stackoverflow.com/a/40370876/446747 for how to detect end-of-page - you can swap in a different value in comparison however you want – josh.trow Dec 21 '19 at 16:07
  • @josh.trow the thing is that `div#c_g` is the one scrolling. So `window` would always say that I'm at the bottom, because `#c_g` has a height of 100%. – Nikk Dec 21 '19 at 22:09
  • @josh.trow I've tried `(window.innerHeight + window.pageYOffset) >= c_g.offsetHeight` but it stll always says I'm at the bottom. – Nikk Dec 21 '19 at 22:12

0 Answers0