检查元素是否可滚动

紫微前端

于 2022-07-26 09:37:08 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

分类专栏：常用代码片段文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125988153

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍如何使用JavaScript来检查HTML元素是否具备垂直或水平滚动条，详细讲解了通过offsetWidth、offsetHeight、scrollWidth、scrollHeight等属性判断元素是否可滚动的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const isScrollable = function (ele) {
    // Compare the height to see if the element has scrollable content
    const hasScrollableContent = ele.scrollHeight > ele.clientHeight;

    // It's not enough because the element's `overflow-y` style can be set as
    // * `hidden`
    // * `hidden !important`
    // In those cases, the scrollbar isn't shown
    const overflowYStyle = window.getComputedStyle(ele).overflowY;
    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;

    return hasScrollableContent && !isOverflowHidden;
};