vue 为页面中某个元素添加监听事件监听此元素的子元素有没有滚动

可以使用`scroll`事件来监听元素的滚动，然后使用`event.target`获取到触发事件的元素，再通过`event.target.querySelectorAll(':scope > *')`获取到该元素的所有直接子元素，最后遍历子元素，判断它们是否有滚动即可。

以下是一个示例代码：

const element = document.getElementById('your-element-id');

element.addEventListener('scroll', function(event) {
  const children = event.target.querySelectorAll(':scope > *');
  children.forEach(child => {
    if (child.scrollHeight > child.clientHeight || child.scrollWidth > child.clientWidth) {
      console.log('子元素有滚动');
    }
  });
});

其中`querySelectorAll(':scope > *')`用于获取直接子元素，`scrollHeight`和`scrollWidth`表示元素实际内容的高度和宽度，`clientHeight`和`clientWidth`表示元素可见区域的高度和宽度。

相关问题

Vue 3的@scroll事件来监听滚动事件 取不到值

在Vue 3中，使用 `@scroll` 绑定滚动事件时，可以使用 `ref` 来获取滚动元素的引用，然后通过引用来获取滚动值。

例如，如果你有一个滚动容器：

<template>
  <div ref="scrollContainer" @scroll="handleScroll">
    <!-- 滚动内容 -->
  </div>
</template>

你可以在 `handleScroll` 方法中获取滚动值：

<script>
import { ref } from 'vue';

export default {
  setup() {
    const scrollContainer = ref(null);
    const handleScroll = () => {
      const scrollTop = scrollContainer.value.scrollTop;
      console.log(scrollTop);
    };

    return {
      scrollContainer,
      handleScroll,
    };
  },
};
</script>

注意，`ref` 返回的是一个对象，因此需要使用 `.value` 来获取实际的 DOM 元素。另外，`scrollTop` 是元素的属性，而不是事件对象的属性。

在vue的中实时监听某个标签是否有滚动条

你可以使用`MutationObserver`来监听标签内容的变化，进而判断是否出现了滚动条。

具体的实现步骤如下：

1. 获取要监听的标签元素，例如：

const targetElement = document.querySelector('.scrollable')

2. 创建一个`MutationObserver`实例，并传入回调函数。该回调函数会在目标元素变化时被调用。

const observer = new MutationObserver(callback)

3. 在回调函数中，使用`getComputedStyle`获取目标元素的`overflow`属性值，即可判断是否出现了滚动条。

function callback(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      const target = mutation.target
      const style = window.getComputedStyle(target)
      if (style.overflow === 'auto' || style.overflow === 'scroll') {
        console.log('滚动条出现了')
      } else {
        console.log('没有滚动条')
      }
    }
  }
}

4. 最后，调用`observer.observe`方法，开始监听目标元素的变化。

observer.observe(targetElement, { attributes: true, childList: true, subtree: true })

这里的`attributes: true, childList: true, subtree: true`表示监听目标元素及其子元素的所有变化。