如何在页面无滚动条时隐藏向下滚动箭头？

首先看你现有代码的核心问题：逻辑搞反了——你现在是当有滚动条时隐藏箭头，但需求是无滚动内容时隐藏，所以条件判断和操作得反过来。另外只在页面加载时判断一次不够，窗口大小变化或者内容动态更新时，滚动条状态可能改变，得同步更新箭头的显示状态。

给你调整后的完整代码：

// 封装判断元素是否存在滚动条的方法
(function($) {
    $.fn.hasScrollBar = function() {
        // 仅判断纵向滚动条，若需兼顾横向可添加 || this[0].scrollWidth > this.innerWidth()
        return this[0] ? this[0].scrollHeight > this.innerHeight() : false;
    }
})(jQuery);

// 统一处理滚动箭头显示/隐藏的复用函数
function toggleScrollArrow() {
    const hasScroll = $('.catagories-detail').hasScrollBar();
    // 有滚动条就显示箭头，无滚动条则添加d-none类隐藏
    $("#scrollbtm").toggleClass("d-none", !hasScroll);
}

// 页面初始化及监听事件
$(function(){
    // 页面加载完成后首次判断
    toggleScrollArrow();
    // 监听窗口大小变化，实时更新箭头状态
    $(window).on('resize', toggleScrollArrow);
    // 若内容为动态加载（如AJAX请求、用户交互新增内容），需在内容更新完成后手动调用 toggleScrollArrow()
});

关键调整说明： #

• 反转逻辑：使用toggleClass("d-none", !hasScroll)，直接根据滚动条状态控制隐藏类的添加/移除，更简洁直观
• 提取复用函数：把判断和操作封装成toggleScrollArrow，方便在页面加载、窗口resize、动态内容更新等场景重复调用
• 新增resize监听：确保窗口缩放时，滚动条状态变化能同步反映到箭头的显示状态
• 可选横向滚动支持：如果你的场景需要考虑横向滚动，可在hasScrollBar方法中添加横向滚动的判断条件

内容的提问来源于stack exchange，提问作者Shubham Patel