<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>