<!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>
