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

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

    1.不使用框架实现

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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <style>
    7.       .container {
    8.         width: 300px;
    9.         overflow-x: hidden;
    10.         white-space: nowrap;
    11.         border: 1px solid #ccc;
    12.       }
    13.       .content {
    14.         display: inline-block;
    15.       }
    16.     style>
    17.   head>
    18.   <body>
    19.     <div class="container" onwheel="scrollHorizontally(event)">
    20.       <div class="content">Content 1div>
    21.       <div class="content">Content 2div>
    22.       <div class="content">Content 3div>
    23.       <div class="content">Content 4div>
    24.       <div class="content">Content 5div>
    25.       <div class="content">Content 6div>
    26.     div>
    27.  
    28.     <script>
    29.       function scrollHorizontally(e) {
    30.         e = window.event || e;
    31.         var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
    32.         document.querySelector(".container").scrollLeft -= delta * 40; // 每次滚动移动的距离
    33.         e.preventDefault();
    34.       }
    35.     script>
    36.   body>
    37. html>

    效果：

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

    1. <template>
    2.     <div style="height: 400px">
    3.         <div class="container" v-horizontal-scroll>
    4.             <div class="box">Content 1div>
    5.             <div class="box">Content 2div>
    6.             <div class="box">Content 3div>
    7.             <div class="box">Content 4div>
    8.             <div class="box">Content 5div>
    9.             <div class="box">Content 6div>
    10.             <div class="box">Content 1div>
    11.             <div class="box">Content 2div>
    12.             <div class="box">Content 3div>
    13.             <div class="box">Content 4div>
    14.             <div class="box">Content 5div>
    15.             <div class="box">Content 6div>
    16.         div>
    17.     div>
    18. template>
    19.  
    20. <script>
    21. export default {
    22.     data() {
    23.         return {};
    24.     },
    25.     directives: {
    26.         'horizontal-scroll': {
    27.             bind: function (el) {
    28.                 el.addEventListener('wheel', function (event) {
    29.                     event.preventDefault();
    30.                     el.scrollLeft += event.deltaY;
    31.                 });
    32.             }
    33.         }
    34.     },
    35.     mounted() {},
    36.     methods: {}
    37. };
    38. script>
    39.  
    40. <style lang="scss" scoped>
    41. .container {
    42.     width: 300px;
    43.     overflow-x: hidden;
    44.     white-space: nowrap;
    45.     border: 1px solid #ccc;
    46.     display: flex;
    47.     overflow-x: scroll;
    48.     overflow-y: hidden;
    49.     white-space: nowrap;
    50.     margin: 50px;
    51. }
    52. .container::-webkit-scrollbar {
    53.     display: none;
    54. }
    55. .box {
    56.     // display: inline-block;
    57. }
    58. style>

    效果

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

  • 相关阅读:
    如何保证数据库与缓存数据一致性？
    使用pytorch处理自己的数据集
    PDF转图片怎么转？建议收藏这三种方法
    SpringBoot笔记：SpringBoot集成MyBatisPlus、Sqlite实战
    大数据与智慧物流
    easyexcel导出excel 简单实现
    Nebula Studio：部署与连接
    MySQL--视图&导入导出&索引&执行计划
    LabVIEW如何使用热键去触发自定义的事件
    Spring源码解析——@Transactional注解的声明式事物介绍
  • 原文地址：https://blog.csdn.net/qq_44278289/article/details/134536447