鼠标滚轮横向移动

Rain羽

已于 2024-08-28 17:38:19 修改

阅读量176

点赞数 1

文章标签：前端 css javascript

于 2024-08-28 17:11:13 首次发布

本文链接：https://blog.csdn.net/rainylf/article/details/141645208

版权

鼠标滚轮横向移动

第一个例子-HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scroll with Mouse Wheel</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .scroll-container {
            width: 100vw;
            overflow-x: auto;
            white-space: nowrap;
            border: 1px solid #ccc;
            position: relative;
        }
        .scroll-content {
            display: inline-block;
            width: 200vw; /* Adjust width to ensure horizontal scrolling */
            height: 200px;
            background: linear-gradient(90deg, #ff8c00, #ff6347);
        }
        .scroll-item {
            display: inline-block;
            width: 200px;
            height: 100%;
            background: #eee;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="scroll-container" id="scrollContainer">
        <div class="scroll-content">
            <div class="scroll-item"></div>
            <div class="scroll-item"></div>
            <div class="scroll-item"></div>
            <div class="scroll-item"></div>
            <div class="scroll-item"></div>
        </div>
    </div>

    <script>
        // JavaScript to enable horizontal scrolling with mouse wheel
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('scrollContainer');
            
            container.addEventListener('wheel', function(event) {
                if (event.deltaY !== 0) {
                    // Scroll horizontally based on vertical wheel movement
                    container.scrollLeft += event.deltaY;
                    event.preventDefault(); // Prevent the default vertical scroll
                }
            });
        });
    </script>
</body>
</html>

第二个例子-HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scroll with Mouse Wheel</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .scroll-container {
          width: 100%; /* 容器宽度 */
          max-width: 800px; /* 容器最大宽度 */
          overflow-x: scroll; /* 允许横向滚动 */
          white-space: nowrap; /* 保持内容在一行显示 */
        }

        .scroll-item {
          display: inline-block; /* 子元素横向排列 */
          width: 200px; /* 子元素宽度 */
          height: 100px; /* 子元素高度 */
          margin-right: 10px; /* 子元素之间的间隔 */
          background-color: #f0f0f0; /* 子元素背景颜色 */
        }
    </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-item">Item 1</div>
    <div class="scroll-item">Item 2</div>
    <div class="scroll-item">Item 3</div>
    <div class="scroll-item">Item 4</div>
    <div class="scroll-item">Item 5</div>
    <div class="scroll-item">Item 6</div>
    <div class="scroll-item">Item 7</div>
  </div>

    <script>
        document.querySelector('.scroll-container').addEventListener('wheel', function(e) {
        if (e.deltaY === 0) return; // 忽略垂直滚动

        // 阻止默认行为，防止页面也滚动
        e.preventDefault();

        // 计算滚动位置
        var scrollLeft = this.scrollLeft;
        var scrollDelta = -e.deltaY;

        // 更新滚动位置
        this.scrollLeft = scrollLeft + scrollDelta;
      });
    </script>
</body>
</html>

第三个例子-VUE

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-content">
      <div class="scroll-item" v-for="i in 10" :key="i">
        Item {{ i }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HorizontalScroll',
  mounted() {
    this.addScrollListener();
  },
  methods: {
    addScrollListener() {
      const container = this.$refs.scrollContainer;

      container.addEventListener('wheel', (event) => {
        if (event.deltaY !== 0) {
          container.scrollLeft += event.deltaY;
          event.preventDefault(); // Prevent the default vertical scroll
        }
      });
    }
  }
}
</script>

<style scoped>
.scroll-container {
  width: 100vw;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid #ccc;
  position: relative;
}

.scroll-content {
  display: inline-block;
  width: 200vw; /* Ensure content is wide enough for horizontal scrolling */
  height: 200px;
  background: linear-gradient(90deg, #ff8c00, #ff6347);
}

.scroll-item {
  display: inline-block;
  width: 200px;
  height: 100%;
  background: #eee;
  margin-right: 10px;
}
</style>

第四个例子-VUE

<template>
  <div class="scroll-container" @wheel="handleScroll">
    <!-- 子元素 -->
    <div class="scroll-item" v-for="item in items" :key="item.id">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HorizontalScroll',
  data() {
    return {
      // 假设items是一个数组，包含多个对象，每个对象都有id和content属性
      items: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },
        { id: 3, content: 'Item 3' },
        { id: 4, content: 'Item 4' },
        { id: 5, content: 'Item 5' },
        { id: 6, content: 'Item 6' },

        // 更多项...
      ],
    };
  },
  methods: {
    handleScroll(event) {
      // 检查滚动方向
      if (event.deltaY === 0) return;

      // 阻止默认滚动行为
      event.preventDefault();

      // 获取滚动容器的引用
      const scrollContainer = event.currentTarget;

      // 计算新的滚动位置
      const scrollLeft = scrollContainer.scrollLeft - event.deltaY;

      // 更新滚动位置
      scrollContainer.scrollLeft = scrollLeft;
    },
  },
};
</script>

<style scoped>
.scroll-container {
  width: 100%; /* 容器宽度 */
  max-width: 800px; /* 容器最大宽度 */
  overflow-x: scroll; /* 允许横向滚动 */
  white-space: nowrap; /* 保持内容在一行显示 */
  cursor: grab; /* 改变鼠标光标样式 */
}

.scroll-item {
  display: inline-block; /* 子元素横向排列 */
  width: 200px; /* 子元素宽度 */
  height: 100px; /* 子元素高度 */
  margin-right: 10px; /* 子元素之间的间隔 */
  background-color: #f0f0f0; /* 子元素背景颜色 */
}
</style>