检查元素是否可滚动

lio_zero

于 2022-03-01 11:50:21 发布

阅读量550

点赞数

文章标签：前端 javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_46267040/article/details/125370110

版权

本文介绍了一个JavaScript函数，用于检查元素是否具有可滚动内容，同时考虑了`overflow-y`样式对滚动行为的影响。它通过比较元素高度与可视区高度，并检查`overflow-y`是否设为`hidden`，来确定元素是否可滚动。

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

如果 ele 元素可滚动，则以下函数返回 true。

const isScrollable = ele => {
  // 比较高度以查看元素是否具有可滚动内容
  const hasScrollableContent = ele.scrollHeight > ele.clientHeight

  // 考虑元素的 overflow-y 样式是否设置为 hidden 或 hidden !important
  // 在这些情况下，不会显示滚动条。
  const overflowYStyle = window.getComputedStyle(ele).overflowY
  const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1

  return hasScrollableContent && !isOverflowHidden
}