首页 > 代码库 > 鼠标滚轮控制页面横向滚动
鼠标滚轮控制页面横向滚动
metrojs.js和jquery.mousewheel.min.js这两个是必须要有的
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="js/jquery-1.4.2.min.js" type="text/javascript"></script><script src="js/metrojs.js" type="text/javascript"></script><script type="text/javascript" src="js/jquery.mousewheel.min.js"></script><style>.panorama{ position:relative; overflow:auto; overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling: touch; -ms-touch-action: manipulation; -ms-scroll-chaining:none; width:100%;}.content-wrapper{ overflow:auto; position:relative; padding-bottom:60px;}</style></head><body><div class="panorama"> <div class="content-wrapper"> <table> <tr> <td>1项目编号</td> <td>2项目编号/项目名称/主责处室/项目经理</td> <td>3项目编号/项目经理</td> <td>4项目编号/主责处室/项目经理</td> <td>5项目编号/室/项目经理</td> <td> <table> <tr> <td>qwergtyhjfdvbu</td> </tr> </table> </td> <td>7项目编号/项目名称/主责处室/项目经理</td> <td>8项目编室/项目经理</td> <td>9项目编号/项目名称/主责处室/项目经理</td> <td>10项目编号/项目名称/主责处室/项目经理</td> <td>11项目编号/责处室/项目经理</td> <td>12项目编号/项目名称/主责处室/项目经理</td> <td>13项目编责处室/项目经理</td> <td>14项目编号/项目名称/主责处室/项目经理</td> <td>15项目编号/项目名称/主责处室/项目经理</td> <td>16项目责处室/项目经理</td> <td>17项目编号/项目名称/主责处室/项目经理</td> <td>18项目编号/项目名称/主责处室/项目经理</td> <td>19项目编号/项目名称/主责处室/项目经理</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> </tr> </table> </div></div> </body></html>
js代码为：
$(document).ready(function () {var $panos = $(".panorama") stgs = { size: ‘auto‘, padRight: 48, showScroll: window.showScroller || false, contentSel: ".content-wrapper", contentWidthSel: typeof (window.contentWidthSel) !== "undefined" ? window.contentWidthSel : ".content-wrapper table" }, metrojs = $.fn.metrojs; if (metrojs.capabilities === null) metrojs.checkCapabilities(); if ($panos.length > 0){ $panos.each(function (idx, ele) { var $pano = $(ele); var panoHeight = $pano.height(); var panoWidth = $pano.width(); if (!metrojs.capabilities.canTouch) { if (!stgs.showScroll) $pano.css({ ‘overflow-x‘: ‘hidden‘ }); setPanoWidth($pano, stgs); $pano.bind("mousewheel.metrojs", function (event, delta) { if (event.ctrlKey) return; event.preventDefault(); var amount; if (delta < 0) { amount = 90; } else { amount = -90; } $pano.scrollLeft($pano.scrollLeft() + amount); }); }else{ setPanoWidth($pano, stgs); } }); } function setPanoWidth($pano, stgs) { if (stgs.size === ‘auto‘) { var width = stgs.padRight; $pano.find(stgs.contentWidthSel).each(function () { width += $(this).outerWidth(true); }); // debug // $(".site-title").append(width + ‘-‘); $pano.find(stgs.contentSel).css({ width: width + ‘px‘ }); } else if (stgs.size.length > 0) { // debug // $(".site-title").append(stgs.size + ‘+‘); $pano.find(stgs.contentSel).css({ width: stgs.size }); } } });
鼠标滚轮控制页面横向滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。