鼠标可控的表格滑动（左右）demo效果示例（整理）

已于 2022-06-14 13:37:19 修改
阅读量935 收藏 1
点赞数 2
文章标签： html linq css
于 2017-12-27 15:33:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38881495/article/details/78912867
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标可控制滚动条滚动</title>
    <style>
        #tablebox{
            width: 500px;
            background:#FCC;
            overflow-y: hidden;
            overflow-x: auto;
        }
        #tablebox td {
            border: 1px solid #CCC;
            border-width: 0 1px 1px 0;
            padding: 4px 5px;
            vertical-align: middle;
            text-align: right;
            white-space: nowrap;
            text-align: left;
        }

        #table{
            border-collapse: 0;
            border-spacing: 0;
        }
        #table tr{
            background-color: #fff;
        }
    </style>

    <script>
        window.onload = function() {
            var a = document.getElementById("tablebox");
            var scroll_width = 100; //滚动一下的距离
            if(document.addEventListener){
                document.addEventListener('DOMMouseScroll', mousewheel_event, false); // FF
            }
            a.onmousewheel = mousewheel_event; // IE/Opera/Chrome
            function mousewheel_event(e) {
                var e = e || window.event, v;
                e.wheelDelta ? v=e.wheelDelta : v=e.detail;
                if(v>3||-v>3) v=-v;
                v>0 ? a.scrollLeft+=scroll_width : a.scrollLeft-=scroll_width;
                
                e.preventDefault(); //阻止浏览器的默认滚动
            }
        };
    </script>

</head>
<body>
    <div id="tablebox">
    <table id="table">
        <tbody>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
        </tr>

        <tr>
            <td>我是姓名</td>
            <td>性别男女</td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
        </tr>
        <tr>
            <td>我是姓名</td>
            <td>性别男女</td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
        </tr>

        <tr>
            <td>我是姓名</td>
            <td>性别男女</td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
            <td> - </td>
        </tr>
    </tbody></table>
</div>
</body>
</html>

 

知 秋~
关注
鼠标左右拖动，键盘左右移动，点击箭头左右移动内容
07-01
近期项目发展历程需要实现鼠标左右拖动，键盘左右移动，点击箭头左右移动内容
iOS左右滑动菜单Demo
04-23
- 考虑添加阴影效果以增强视觉层次感，让用户知道菜单是可滑动的。 5. **自定义滑动行为**： - 你可以根据需求调整滑动的灵敏度、阻力以及滑动范围。 - 也可以选择在滑动到一定位置后固定菜单，或者在释放手指时...
vue + el-table 实现鼠标左右滑动查看表格内容
czhenzhen的博客
07-18 4231
代码】vue+el-table实现鼠标左右滑动查看表格内容。
用Javascript实现鼠标拖拽网页表单
www_extract_com_cn的专栏
12-27 829
本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html　　所有版权归原文所有　　Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．　　有很多理由让你的网站加入拖拽
拖动鼠标，el-table表格实现左右滑动
weixin_43895903的博客
12-01 877
【代码】实现 el-table表格中可以左右滑动。
vue el-table 固定列后 鼠标滚轮 左右滚动
cmmboy1990的博客
01-18 2727
1.效果： 2.代码： <template> <div class="app-container"> <el-table id="historyTable" :data="tableData" style="width: 100%" border> <el-table-column fixed prop="date" label="组织机构代码" width="150"> </el-table-column>
jquery左右可伸缩滑动门效果demo
05-23
【描述】"jQuery 左右可伸缩滑动门效果demo"是指利用jQuery库实现的这一互动效果的示例代码。在前端开发中，jQuery因其简洁的API和强大的DOM操作能力而广受欢迎。滑动门效果通常结合CSS样式和JavaScript事件处理来...
Android ViewPager实现左右滑动翻页效果
08-28
"Android ViewPager实现左右滑动翻页效果" Android ViewPager是Android平台上一种常用的滑动翻页控件，能够实现左右滑动翻页效果，下面将详细介绍ViewPager实现左右滑动翻页效果的知识点。 一、ViewPager概述 ...
android滑动标题demo
08-28
这个“android滑动标题demo”是为开发者提供了一个实现滑动标题功能的实例，它实现了标题随着滑动距离进行淡入淡出的效果，使得应用在用户滚动时具有更流畅的视觉感受。 首先，我们来深入理解滑动标题的原理。滑动...
IOS应用源码Demo-可以用手指左右滑动切换视图的效果demo-毕设学习.zip
04-04
这个压缩包文件“IOS应用源码Demo-可以用手指左右滑动切换视图的效果demo-毕设学习.zip”包含了iOS应用开发中的一个常见功能——通过手势左右滑动来切换视图的示例代码。这种效果在许多移动应用中都可以看到，如社交...
【element-ui】前端使用el-table自定义表头数据左右移动
qq_44971635的博客
05-30 1113
模拟el-table自定义数据左右移动，并且提交数据
el-table拖拽功能实现（3种详细解释）
最新发布
qq_71214810的博客
12-22 6542
1.el-table自带的列宽拖拽 2.实现左右table宽度拖拽 3.利用第3方插件自由拖拽
table列表左右拖拽实现滑动效果
qq_39585172的博客
05-23 3756
添加table左右拖动效果的指令
[AHK]Excel 怎么使用鼠标滚轮控制表格左右移动
liuyukuan的专栏
04-28 7969
ahk是否可以设置在excel里按着shiit在用滚轮进行下面的滚轮拖动动作？ #IfWinActive,ahk_exe EXCEL.EXE ~Shift & WheelUp:: ; 向左滚动. SetScrollLockState, On Send {Left} SetScrollLockState, off return ~Shift &am...
js鼠标可控的表格左右滑动demo效果示例（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-13 2877
&lt;!-- 粘贴复制可直接看效果 --&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;鼠标可控制滚动条滚动&...
滑动固定表格头和列--js,html,css--移动端--基于Iscroll
斜杠的博客
07-18 9595
简单实现固定表格头和列。 之前做了一个表格固定头和列的，分享一下代码和思路。 滑动固定其他地方也可参考。 1.滑动仅固定头或列 。 2.滑动即可固定头，也可固定列。
Vue使用汇总之el-table实现鼠标拖动表格滚动
学习和工作总结，共勉！
02-25 2466
有时候我们需要在Element-UI中实现这样的一个效果，鼠标水平拖动，表格也水平滚动，这样可以隐去滚动条！ 一、元素增加三个事件 <template> <el-table @mousedown.native="mouseDownHandler" @mouseup.native="mouseUpHandler" @mousemove.native="mouseMoveHandler" ref=
iOS 可以纵向横向滑动的表格实现
烽火连城的博客
03-16 1112
背景 这个效果是今天公司项目里面遇上的，也是第一次遇见这种需求，所以记录下来，效果如上图。需求主要是可以实现上下的滑动，并且同时最左侧的“线路名称”这一列在向左滑动的时候是不能跟随滚动的。这个功能主要是实现用户可以方便查看关于一下难以看全的列表数据。下面说一下思路。 代码大体思路 由上面的GIF图和基本需求描述我们第一个想到的东西就是万能的tableview，没错
使用JS+CSS创建大气滑动菜单的代码示例
本资源提供了一个使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 实现的大气清新的滑动菜单效果代码，它允许用户在鼠标悬停时动态展示二级菜单，增强了网站导航的可操作性和视觉吸引力。 首先，让我们了解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知 秋~

文章里可以看到打赏码哦~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值