如果已達到最大滾動高度，如何隱藏元素

Question

如果用戶位於下拉列表的頂部，我需要隱藏一個元素，然后如果用戶滾動到下拉列表的底部，則需要隱藏另一個元素。 已經將頂部元素排序為我正在努力解決的底部元素。 這是到目前為止的代碼

 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>

主要關注的是“向下箭頭容器”，當用戶滾動到底部時需要隱藏它，然后當用戶不再處於下拉菜單的最大滾動高度時會重新出現

Answer 1

我想您正在尋找的是可以告訴您下拉菜單高度的東西，然后您可以使用與up箭頭相同的方法。

這是我發現如何在javascript中獲取元素高度的接近點

考慮到這一點，您可以執行以下操作：

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);
}