描述

判断 dom 元素是否是滚动容器，并返回滚动属性 ["auto", "auto", index: 0, input: "auto", groups: undefined]

1.示例

推荐打开控制查看 dom元素节点 容器是否滚动 盒子2是否滚动 body是否滚动

容器

盒子1

盒子2

<template>
  <div>
    <el-divider content-position="left">推荐打开控制查看 dom元素节点</el-divider>

    <el-button @click="onClick('.isScroll-box', $event)">容器是否滚动</el-button>
    <el-button @click="onClick('.isScroll-box-2', $event)">盒子2是否滚动</el-button>
    <el-button @click="onClick('body', $event)">body是否滚动</el-button>

    <div class="isScroll-box">
      容器
      <div class="isScroll-box-1">盒子1</div>
    </div>

    <div class="isScroll-box-2">盒子2</div>
  </div>
</template>

<script>
import { isScroll } from 'sf-utils2'
export default {
  methods: {
    onClick(cls = '', event) {
      const isScrollFlag = isScroll(document.querySelector(cls))
      console.log(isScrollFlag)
      alert(`${event.target.innerText}：${isScrollFlag ? '是' : '否'}`)
    }
  }
}
</script>
<style>

.isScroll-box {
  padding: 20px;
  border: 1px solid cornsilk;
  background-color: coral;
  color: #fff;
  height: 100px;
  overflow-y: auto;
  overflow-x: auto;
  margin-top: 12px;
}
.isScroll-box-1 {
  padding: 30px;
  background: #adad55;
}
.isScroll-box-2 {
  padding: 30px;
  background: #08f784;
  margin-top: 10px;
}

</style>

显示代码 复制代码 复制代码

2.入参说明

参数	说明	类型	是否必填	默认值
el	目标元素	HTMLElement	-	-
vertical	是否是垂直, 不传默认是按照 overflow	Boolean	-	-

3.源码

源码，点开查看 👈

/**
 * 判断dom元素是否是滚动容器，并返回滚动属性 ["auto", "auto", index: 0, input: "auto", groups: undefined]
 * @param {HTMLElement} el
 * @param {boolean} vertical  是否是垂直，不填入按照overflow
 * @returns {*}
 */
function isScroll(el, vertical) {
  const determinedDirection = vertical !== null && vertical !== undefined
  const overflow = determinedDirection
    ? vertical
      ? getStyle(el, 'overflow-y')
      : getStyle(el, 'overflow-x')
    : getStyle(el, 'overflow')
  return overflow.match(/(scroll|auto)/)
}