expand-element / getIsScroll

Function: getIsScroll()

function getIsScroll(el: HTMLElement): {
  x: boolean;
  y: boolean;
}

**获取元素的 横纵向 内容是否超出，应该有滚动条 **

version: v0.0.4+

example

noScroll

Scroll

Details

<template>
  <div class="scroll-box" ref="noScroll">
    <div style="width: 100px;background-color: aqua;">noScroll</div>
  </div>
  <div>
    <button class="btn" @click="noScrollFn">获取noScroll</button>
    <pre class="pre">{{ noScrollCode }}</pre>
  </div>
  <div class="scroll-box" ref="scroll">
    <div style="width: 1000px;height: 100px;background-color: aqua;">Scroll</div>
  </div>
  <div>
    <button class="btn" @click="scrollFn">获取Scroll</button>
    <pre class="pre">{{ scrollCode }}</pre>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import { getIsScroll } from 'expand-element'
import { getIsScroll } from './../../../../lib/main'

const noScroll = ref<HTMLElement | null>(null)
const scroll = ref<HTMLElement | null>(null)
const noScrollCode = ref('')
const scrollCode = ref('')
const noScrollFn = () => {
  if (noScroll.value) {
    const res = getIsScroll(noScroll.value)
    noScrollCode.value = JSON.stringify(res, null, 2)
  }
}
const scrollFn = () => {
  if (scroll.value) {
    const res = getIsScroll(scroll.value)
    scrollCode.value = JSON.stringify(res, null, 2)
  }
}
</script>

<style scoped>
.scroll-box {
  height: 88px;
  overflow: auto;
  background-color: #ccc;
  margin-bottom: 15px;
}
</style>

Parameters

el

HTMLElement

要获取的元素。

Returns

{
  x: boolean;
  y: boolean;
}

包含元素是否超出的对象，包含 x 和 y 属性，值为布尔值，非浏览器环境时，返回 { x: false, y: false }。

x

x: boolean = false;

y

y: boolean = false;

Defined in

scroll/getIsScroll.ts:27