How to hide an element if max scroll height has been reached

Question

I need to hide an element if a user is at the top of a dropdown and then if the user scrolls to the bottom of the dropdown, another element needs to be hidden. Already have the top element sorted its just the bottom one i am struggling with. Here is the code upto now

 const dropdown = document.getElementById('currency-switcher-inner'); const topArrow = document.getElementById('arrow-up-container'); const bottomArrow = document.getElementById('arrow-down-container'); dropdown.onscroll = function() { showTopArrow(); hideTopArrow(); }; function showTopArrow() { if (dropdown.scrollTop > 20) { topArrow.style.display = "block"; } } function hideTopArrow() { if (dropdown.scrollTop < 19) { topArrow.style.display = "none"; } }

 <ul class="currency-switcher-inner" data-currency-switcher id="currency-switcher-inner"> <div class="arrow-up-container" id="arrow-up-container"> <div class="arrow-container-inner"> <div class="currency-arrow-up"></div> </div> </div> {% for currency in shop.enabled_currencies %} <a href="{{ request.path }}?currency={{ currency.iso_code }}" class="currency-switcher-item{% if currency == cart.currency %} active{% endif %}" data-shopify-currency-index={{forloop.index | minus: 1}} data-shopify-currency-option="{{ currency.iso_code }}" > {{currency.iso_code}} {{currency.symbol}} </a> {% endfor %} <div class="arrow-down-container" id="arrow-down-container"> <div class="arrow-container-inner"> <div class="currency-arrow-down"></div> </div> </div> </ul>

The main focus is on the 'arrow-down-container' which is the one that needs to be hidden when user scrolls to the bottom and then will re-appear when the user is not longer at the max scroll height for the dropdown

Answer 1

I guess that what you're looking for is something that can tell you the height of the dropdown, and then you can the same approach that you did for the up arrow.

This is something close that I found how can i get element height in javascript

With that in mind, you could do something like:

const dropdown = document.getElementById('currency-switcher-inner');
const bottomArrow = document.getElementById('arrow-down-container');

dropdown.onscroll = function() {
    const limit = this.clientHeight + bottomArrow.offsetHeight + 1;
    const threshold = this.scrollHeight - limit;
    if (this.scrollTop > threshold) {
        bottomArrow.style.backgroundColor = "red";
    } else {
        bottomArrow.style.backgroundColor = "transparent";
    }

    console.log(limit, threshold);
}