左右拖拽table表格实现横向滚动

最新推荐文章于 2024-10-14 18:43:45 发布

YongChao_bms

最新推荐文章于 2024-10-14 18:43:45 发布

阅读量3.9k

点赞数 1

分类专栏：小功能文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/YongChao_bms/article/details/108084485

版权

小功能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求：有时候table表格内容比较多时，通过滚动条横向滚动不是太方便查看溢出内容，如果可以通过鼠标左右拖拽查看内容就方便多了。故有此demo

<!DOCTYPE HTML>
<html>
   <head>
       <title>表格</title>
       <style type="text/css">
           .table{width: 800px;}
           .divTable{
               width: 500px;
               overflow: auto;
           }
       </style>
   </head>
   <body>
       <div class="divTable">
       <table class="table" border="" cellspacing="" cellpadding="">
           <tr><th>文件</th><th>文件2</th><th>文件</th><th>文件2</th></tr>
           <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
               <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                   <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                       <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                           <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                               <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                                   <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
       </table>
       </div>
<script type="text/javascript">
function inserted() {
let el = document.getElementsByClassName('divTable')[0];
el.style.cursor = 'grab';
el.onmousedown = function(enent) {
let gapX = event.clientX;
let startX = el.scrollLeft;
document.onmousemove = function(e) {
let x = e.clientX - gapX;
el.scrollLeft = startX - x;
return false;
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
inserted();
</script>
   </body>
</html>