标签：滚轮 鼠标 ceshi mouseScroll domObj let onmousewheel div event

<template>
  <div id="ceshi">
    <ul>
      <li v-for="item in 1000">{{item}}</li>
    </ul>
  </div>
</template>
<script>
  import aa from '../App.vue'
  export default {
    data() {
      return {
        domObj: null,
        list:[]
      }
    },
    mounted() {
      this.scrollFunction()
    },
    methods: {
      scrollFunction() {
        this.domObj = document.getElementById('ceshi') // 通过id获取要设置的div
        if (this.domObj.attachEvent) { // IE
          this.domObj.attachEvent('onmousewheel', this.mouseScroll)
        } else if (this.domObj.addEventListener) {
          this.domObj.addEventListener('DOMMouseScroll', this.mouseScroll, false)
        }
        this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll
      },
      mouseScroll(event) { // google 浏览器下
        let detail = event.wheelDelta || event.detail
        let moveForwardStep = -1
        let moveBackStep = 1
        let step = 0
        step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
        event.preventDefault() // 阻止浏览器默认事件
        this.domObj.scrollLeft = this.domObj.scrollLeft + step
      }
    },
    beforeDestroy() {
      if (!this.domObj) return
      if (this.domObj.attachEvent) {
        this.domObj.detachEvent('onmousewheel', this.mouseScroll)
      }
      if (this.domObj.addEventListener) {
        this.domObj.removeEventListener('DOMMouseScroll', this.mouseScroll, false)
      }
    }
  }
</script>
<style>
  #ceshi{
    width: 500px;
    background-color: antiquewhite;
    margin: 100px auto;
    overflow: hidden;
    padding: 10px;
  }
  #ceshi ul{
    list-style: none;
    display: flex;
    width: 20000px;
  }
  #ceshi ul li{
    margin: 0 20px;
  }
</style>
 

标签：滚轮,鼠标,ceshi,mouseScroll,domObj,let,onmousewheel,div,event
来源： https://blog.csdn.net/weixin_45749016/article/details/120722627

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。