<!-- 粘贴复制可直接看效果 --> <!DOCTYPE html> <html lang="en"> <head></head> <body> <meta charset="UTF-8" /> <title>鼠标可控制滚动条滚动</title> <style> *{margin: 0;padding: 0;} #tablebox{width: 500px;background:#FCC;overflow-y: hidden;overflow-x: auto;} #table 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> <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> </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> </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> </tr> </tbody> </table> </div> <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> </body> </html> <!-- 粘贴复制可直接看效果 -->
