Vue3 保存持续存在的Dom元素

Question

在写一个 Vue3 的组件，
其中有一个功能为将 div 的每次滚动距离为自己控制的固定距离

实现思路：
通过使用Element.scrollBy() + WheelEvent 事件来实现

由于这个是在写 Vue3 组件
所以我保持着 Dom 操作尽量由 Vue 操作
而这个又必须访问 Dom ，
所以我想持续保存这个 Dom 元素，因为这个元素会在页面上存在很长时间，
来在 WheelEvent 事件触发时不用再次
getElementsByClassName()

另一种访问这个元素的方法是事件的对象
却经过测试 WheelEvent有个问题 ，
使用鼠标滚动时，这个事件的对象
当鼠标在内容上时 为内容，
当鼠标在内边距时为容器，
但我想获取到是容器元素

<div class="e" @wheel="mousewheel">
 <div class="item">
     0
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     1
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     2
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     3
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     4
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     5
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     6
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     7
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     8
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     9
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     10
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     11
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     12
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     13
     <img src="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
</div>

//script
 setup() {
         function mousewheel(e){
         console.log(e);
         // e.preventDefault();

         console.log('wheel');
     }
             return {
         mousewheel
     }
     

Answer 1

监听元素滚动不是用onscroll的吗，哪有用wheel的