Tag支持鼠标滚动

草莓千层蛋糕
82 阅读4分钟

问题一：flex 布局里面的内容宽度会被压缩

flex-wrap 默认是不换行的

image.png image.png

flex-shrink: 0;/防止被压缩/

应用场景：防止元素变形 （比如图片） blog.csdn.net/SSophia/art…

image.png

event.wheelDelta 可以获取鼠标滚轮滚动的方向 向上滚 120 向下滚 -120 wheelDelta这个值我们不看大小，只看正负

wheelDelta这个属性火狐中不支持 在火狐中使用event.detail来获取滚动的方向 向上滚 -3 向下滚 3

前端如何区分是不是火狐浏览器还是谷歌 ie

function myBrowser(){  
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器  
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器  
    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器  
    var isSafari = userAgent.indexOf("Safari") > -1; //判断是否Safari浏览器  
    if (isIE) {  
        var IE5 = IE55 = IE6 = IE7 = IE8 = false;  
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");  
        reIE.test(userAgent);  
        var fIEVersion = parseFloat(RegExp["$1"]);  
        IE55 = fIEVersion == 5.5;  
        IE6 = fIEVersion == 6.0;  
        IE7 = fIEVersion == 7.0;  
        IE8 = fIEVersion == 8.0;  
        if (IE55) {  
            return "IE55";  
        }  
        if (IE6) {  
            return "IE6";  
        }  
        if (IE7) {  
            return "IE7";  
        }  
        if (IE8) {  
            return "IE8";  
        }  
    }//isIE end  
    if (isFF) {  
        return "FF";  
    }  
    if (isOpera) {  
        return "Opera";  
    }  
}//myBrowser() end  
//以下是调用上面的函数  
if (myBrowser() == "FF") {  
    alert("我是 Firefox");  
}  
if (myBrowser() == "Opera") {  
    alert("我是 Opera");  
}  
if (myBrowser() == "Safari") {  
    alert("我是 Safari");  
}  
if (myBrowser() == "IE55") {  
    alert("我是 IE5.5");  
}  
if (myBrowser() == "IE6") {  
    alert("我是 IE6");  
}  
if (myBrowser() == "IE7") {  
    alert("我是 IE7");  
}  
if (myBrowser() == "IE8") {  
    alert("我是 IE8");  
}

e.deltaY 是指

image.png 原本谷歌下是负的现在鼠标下滚 跟e.deltaY的值一样了 so在vue-admin-template中 e.wheelDelta前面需要加个负号 why 不用 event.detail？ 火狐才有detail 而且跟谷歌的 wheelDelta值相反 image.png

原本代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css"
  />
  <script src="https://unpkg.com/vue@2.7.15/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
  <style>
    .tab-list {
      width: 800px;
      height: 80px;
      /* flex-wrap: wrap; */
      flex-wrap: nowrap; //默认是不换行的
      background-color: blue;
      display: flex;
      align-items: center;
      overflow-x: auto;
      transition: all 500ms linear;
    }
    .tab-list::-webkit-scrollbar {
      /* height: 0; */
    }
    .tab-item {
      /* min-width: 100px; 希望由内容撑开 */
      flex-shrink: 0;
      height: 40px;
      line-height: 40px;
      /* width: 200px; */
      background-color: antiquewhite;
      padding: 8px;
      border: 1px solid red;
      margin-right: 8px;
    }
  </style>

  <body>
    <div id="app">
      <!-- <template> -->
      <h3>{{ msg }}</h3>
      <div class="tab-list" id="nav">
        <div class="tab-item" v-for="(item,index) in 100" :key="index">
          索引-tag-{{item}}
        </div>
      </div>
      <!-- </template> -->
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            msg: "sss",
            list: [
              {
                name: "1111",
              },
              {
                name: "222",
              },
              {
                name: "333",
              },
              {
                name: "4444",
              },
            ],
          };
        },
        mounted() {
          this.scrollInit(); // 初始化滚动事件
        },
        methods: {
          // 初始化与绑定监听事件方法
          scrollInit() {
            // 获取要绑定事件的元素
            const nav = document.getElementById("nav");
            // document.addEventListener('DOMMouseScroll', handler, false)
            // 添加滚轮滚动监听事件，一般是用下面的方法，上面的是火狐的写法
            nav.addEventListener("mousewheel", this.handler, false);
          },
          // 滚动事件的出来函数
          handler(event) {
            // 获取要绑定事件的元素
            const nav = document.getElementById("nav");
            // 获取滚动方向
            const detail = event.wheelDelta || event.detail;
            // 定义滚动方向，其实也可以在赋值的时候写
            const moveForwardStep = 1;
            const moveBackStep = -1;
            // 定义滚动距离
            let step = 0;
            // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
            if (detail < 0) {
              step = moveForwardStep * 100;
            } else {
              step = moveBackStep * 100;
            }
            // 对需要滚动的元素进行滚动操作
            nav.scrollLeft += step;
          },
        },
      });
    </script>
  </body>
</html>

改进后代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css"
  />
  <script src="https://unpkg.com/vue@2.7.15/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
  <style>
    .tab-list {
      width: 800px;
      height: 80px;
      /* flex-wrap: wrap; */
      flex-wrap: nowrap; //默认是不换行的
      background-color: blue;
      display: flex;
      align-items: center;
      overflow-x: auto;
      transition: all 500ms linear;
    }
    .tab-list::-webkit-scrollbar {
      /* height: 0; */
    }
    .tab-item {
      /* min-width: 100px; 希望由内容撑开 */
      flex-shrink: 0;
      height: 40px;
      line-height: 40px;
      /* width: 200px; */
      background-color: antiquewhite;
      padding: 8px;
      border: 1px solid red;
      margin-right: 8px;
    }
  </style>

  <body>
    <div id="app">
      <!-- <template> -->
      <h3>{{ msg }}</h3>
      <div class="tab-list" id="nav">
        <div class="tab-item" v-for="(item,index) in 100" :key="index">
          索引-tag-{{item}}
        </div>
      </div>

      <p>
        火狐使用addEventListener()方法绑定响应函数，取消默认行为时 *
        不能使用return false *
        需要使用event来取消默认行为event.preventDefault();
        火狐取消浏览器滚动条默认行为 event.preventDefault &&
        event.preventDefault();
      </p>
      <!-- </template> -->
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            msg: "sss",
            list: [
              {
                name: "1111",
              },
              {
                name: "222",
              },
              {
                name: "333",
              },
              {
                name: "4444",
              },
            ],
          };
        },
        mounted() {
          this.scrollInit(); // 初始化滚动事件
        },

        methods: {
          // 初始化与绑定监听事件方法
          scrollInit() {
            // 获取要绑定事件的元素
            const nav = document.getElementById("nav");
            //判断是不是火狐浏览器
            const userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            if (userAgent.indexOf("Chrome") > -1) {
              nav.addEventListener("mousewheel", this.handler, false);
            } //判断是否Chrome浏览器
            if (userAgent.indexOf("Firefox") > -1) {
              document.addEventListener("DOMMouseScroll", this.handler, false);
            }
          },
          // 滚动事件的出来函数
          handler(event) {
            const userAgent = navigator.userAgent;
            // 获取要绑定事件的元素
            const nav = document.getElementById("nav");
            // 获取滚动方向
            const detail = event.wheelDelta || event.detail;
            console.log("event.wheelDelta", event.wheelDelta); // 谷歌：下-150上150 火狐：undefined
            console.log("event.detail", event.detail); // 谷歌浏览器：0  火狐 ： 上-3下3   （这里会跟谷歌的方向刚好相反的）
            console.log("event.detailY", event.deltaY); //正下上负 谷歌：下80上-80  火狐：undefined
            // 定义滚动方向，其实也可以在赋值的时候写
            const moveForwardStep = 1;
            const moveBackStep = -1;
            // 定义滚动距离
            let step = 0;
            // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
            if (userAgent.indexOf("Chrome") > -1) {
              if (detail < 0) {
                step = moveForwardStep * 100;
              } else {
                step = moveBackStep * 100;
              }
            } //判断是否Chrome浏览器
            if (userAgent.indexOf("Firefox") > -1) {
              if (detail < 0) {
                step = -(moveForwardStep * 100);
              } else {
                step = -(moveBackStep * 100);
              }
            }
            // 对需要滚动的元素进行滚动操作
            nav.scrollLeft += step;
          },
        },
      });
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝