【vue】滚动鼠标滚轮的时候，div也会水平滚动

最新推荐文章于 2024-09-03 15:59:41 发布

KatyLight

最新推荐文章于 2024-09-03 15:59:41 发布

阅读量799

点赞数

分类专栏： JS 插件 vue 文章标签： vue.js javascript firefox

本文链接：https://blog.csdn.net/qq_33014695/article/details/126956064

版权

插件同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

一般dom节点鼠标滚轮使用的时候，只能垂直滚动，而现在经过改造，可以变成水平滚动。

vue案例代码：

<template>
<div class="box"   ref="mutter">
  <div class="item">d</div>
  <div class="item">ads</div>
  <div class="item">asdf</div>
  <div class="item">ff</div>
  <div class="item">vdsg</div>
  <div class="item">hg</div>
  <div class="item">h3g</div>
  <div class="item">g</div>
  <div class="item">df</div>
  <div class="item">fd</div>
  <div class="item">dfg</div>
  <div class="item">dfdgfg</div>
  <div class="item">s</div>s
</div>
</template>

<script>
import getBroser from "@/utils/getBroser";


export default {
  name: "scrollRight",
  methods:{

  },
  mounted() {
    /*    if (document.getElementById('yourDiv').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('yourDiv').addEventListener('mousewheel', scrollHorizontally, false);
        // Firefox
        document.getElementById('yourDiv').addEventListener('DOMMouseScroll', scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('yourDiv').attachEvent('onmousewheel', scrollHorizontally);
    }*/
    let c=getBroser();
    let z='';
    switch (c){
      case 'Firefox':
        z='DOMMouseScroll';
        break;
      default:
        z='mousewheel';
        break;
    }
    this.$refs.mutter.addEventListener(z,(e)=>{
      this.$refs.mutter.scrollLeft=this.$refs.mutter.scrollLeft+e.detail*3;
    },false)

  }
}
</script>

<style scoped>
.item{
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: #42b983;
  margin: 10px;
  flex-shrink: 0;
}
.box{
  width: 600px;
  overflow-x: auto;
  display: flex;
}
</style>

getBroser.js

const kUserAgent = {
    Opera: 'Opera',
    Firefox: 'Firefox',
    Chrome: 'Chrome',
    Safari: 'Safari',
    IE: 'IE',
};

const getUserAgent = () => {
    const { userAgent } = navigator; // 取得浏览器的userAgent字符串
    if (userAgent.indexOf('Opera') > -1) {
        // 判断是否Opera浏览器
        return kUserAgent.Opera;
    }
    if (userAgent.indexOf('Firefox') > -1) {
        // 判断是否Firefox浏览器
        return kUserAgent.Firefox;
    }
    if (userAgent.indexOf('Chrome') > -1) {
        // 判断是否为谷歌浏览器
        return kUserAgent.Chrome;
    }
    if (userAgent.indexOf('Safari') > -1) {
        // 判断是否Safari浏览器
        return kUserAgent.Safari;
    }
    if (
        userAgent.indexOf('compatible') > -1 &&
        userAgent.indexOf('MSIE') > -1 &&
        userAgent.indexOf('Opera') > -1
    ) {
        // 判断是否IE浏览器
        return kUserAgent.IE;
    }
    return '';
};

export default  getUserAgent;