css鼠标横向滚动并且不展示滚动条几种方法

news2024/11/15 14:08:17

需求：实现内容超出之后使用属性滚轮进行左右查看超出内容，并且隐藏滚动条

1.不使用框架实现

每次滚动就滚动40px的距离

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .container {
        width: 300px;
        overflow-x: hidden;
        white-space: nowrap;
        border: 1px solid #ccc;
      }
      .content {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="container" onwheel="scrollHorizontally(event)">
      <div class="content">Content 1</div>
      <div class="content">Content 2</div>
      <div class="content">Content 3</div>
      <div class="content">Content 4</div>
      <div class="content">Content 5</div>
      <div class="content">Content 6</div>
    </div>

    <script>
      function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
        document.querySelector(".container").scrollLeft -= delta * 40; // 每次滚动移动的距离
        e.preventDefault();
      }
    </script>
  </body>
</html>

效果：

2.vue2使用自定义指令实现

<template>
    <div style="height: 400px">
        <div class="container" v-horizontal-scroll>
            <div class="box">Content 1</div>
            <div class="box">Content 2</div>
            <div class="box">Content 3</div>
            <div class="box">Content 4</div>
            <div class="box">Content 5</div>
            <div class="box">Content 6</div>
            <div class="box">Content 1</div>
            <div class="box">Content 2</div>
            <div class="box">Content 3</div>
            <div class="box">Content 4</div>
            <div class="box">Content 5</div>
            <div class="box">Content 6</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    directives: {
        'horizontal-scroll': {
            bind: function (el) {
                el.addEventListener('wheel', function (event) {
                    event.preventDefault();
                    el.scrollLeft += event.deltaY;
                });
            }
        }
    },
    mounted() {},
    methods: {}
};
</script>

<style lang="scss" scoped>
.container {
    width: 300px;
    overflow-x: hidden;
    white-space: nowrap;
    border: 1px solid #ccc;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 50px;
}
.container::-webkit-scrollbar {
    display: none;
}
.box {
    // display: inline-block;
}
</style>

效果