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

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

1.不使用框架实现

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


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 1div>
      <div class="content">Content 2div>
      <div class="content">Content 3div>
      <div class="content">Content 4div>
      <div class="content">Content 5div>
      <div class="content">Content 6div>
    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 1div>
            <div class="box">Content 2div>
            <div class="box">Content 3div>
            <div class="box">Content 4div>
            <div class="box">Content 5div>
            <div class="box">Content 6div>
            <div class="box">Content 1div>
            <div class="box">Content 2div>
            <div class="box">Content 3div>
            <div class="box">Content 4div>
            <div class="box">Content 5div>
            <div class="box">Content 6div>
        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>

效果

文章到此结束，希望对你有所帮助~~

相关阅读:
c++使用ifstream和ofstream报错：不允许使用不完整的类型
Java HashMap 的扩容因子为什么是 0.75
快速上手绿联私有云UGOS Pro系统Docker | 安装/部署/管理/docker-compose一网打尽
机器学习之交叉验证汇总及其Python代码
深度学习入门
企业实践开源的动机
Linux——iMX6ULL的启动过程详细解析（启动模式配置、启动设备配置、镜像烧写imx文件基本组成）
java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署
Windows版 PostgreSQL 利用 pg_upgrade 进行大版升级操作
【微信小程序开发】——奶茶点餐小程序的制作（二）

原文地址：https://blog.csdn.net/qq_44278289/article/details/134536447