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

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

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 的行高

最后

以上就是单身斑马为你收集整理的根据鼠标滑轮，判断ul滑动距离/每拨动一次鼠标滑轮-显示一条数据的全部内容，希望文章能够帮你解决根据鼠标滑轮，判断ul滑动距离/每拨动一次鼠标滑轮-显示一条数据所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。