根据鼠标滑轮，判断ul滑动距离/每拨动一次鼠标滑轮-显示一条数据

本文链接：https://blog.csdn.net/qq_40806920/article/details/120290001

本文介绍如何使用JavaScript解决滚动事件，实现当鼠标滚轮上下移动时，菜单列表自动跟随并平滑滚动。通过监听DOMMouseScroll和mousewheel事件，代码展示了利用scrollTop和定位调整li元素位置的方法，适合处理有限数据的列表滚动。

摘要由CSDN通过智能技术生成

写不出来怎么办，硬写！！！有好方法希望大家可以告诉我，多多弥补，直接上代码

html:代码：

<div style="position: relative; height: 300px; overflow: hidden">
            <ul
              class="menuul"
              style="position: absolute; top: 0px; left: 0px"
              id="menulist"
              v-loading="loading"
              @mouseenter="gundong"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.5)"
            >
              <!-- <li style="text-align: center">线路名称</li> -->
              <li :title="i.ocableName" v-for="i in allData" :key="i.id" :style="{ backgroundColor: selectlinecolor === i.ocableName ? '#5677fc' : '' }" @click="selectLine(i)">
                <!-- <span class="linecolor" :style="{ backgroundColor: i.color }" /> -->
                {{ i.ocableName }}
              </li>
              <div class="noguzhang" v-if="allData.length === 0">暂无光缆数据</div>
            </ul>
          </div>

js代码：

gundong() {
      const vm = this;
      // 其他浏览器直接绑定滚动事件;
      // console.log('鼠标滚动事件');
      const menulist = document.getElementById('menulist');
      if (menulist.addEventListener) {
        menulist.addEventListener('DOMMouseScroll', scrollFunc, false);
      }
      menulist.onmousewheel = scrollFunc;
      function scrollFunc(e) {
        e = e || window.event;
        if (e.wheelDelta) {
          if (e.wheelDelta > 0) {
            // 上
            vm.countindex = Number(vm.countindex) + 24;
            if (vm.countindex >= 0) {
              vm.countindex = 0;
            }
            menulist.style.top = vm.countindex + 'px';
            // console.log('滑轮向上滚动', e, menulist.scrollTop, vm.countindex);
          }
          if (e.wheelDelta < 0) {
            // 下
            // console.log(vm.countindex);
            vm.countindex = Number(vm.countindex) - 24;
            // console.log('+++++++++++++++', vm.countindex, vm.allData.length * -24);
            if (vm.countindex <= (vm.allData.length - 12) * -24) {
              vm.countindex = (vm.allData.length - 12) * -24;
            }
            menulist.style.top = vm.countindex + 'px';
            // console.log('滑轮向下滚动', e, menulist.scrollTop, vm.countindex);
          }
        }
      }
    },

引文本来想用scrollTop 来写，但是这个值一直付不上去，所以改用定位，方法有点low 但效果可以实现，24 指的是li 的行高