我试图让水平滚动在单个 div 中工作,或者更确切地说是在(顶部 > 1400)时工作。基本上,向下滚动,遇到有问题的 div - 然后水平滚动。但是,这会导致页面上较高的元素在向下滚动时被右边距覆盖,或者完全禁用滚动。
我已经试了
$(function(){
$("#art").wrapInner("<table cellspacing='30'><tr>");
$("#info").wrap("<td></td>");
$("#info").mousewheel(function(event, delta) {
if (top > 1400) {
this.scrollLeft += (delta * 30);
event.preventDefault();
}
else {
event.Default();
}
});
});
<div id="art">
<section id="info" data-type="background" data-speed="3" class="pages">
...
</section>
</div>
#info {
background: url(time.JPG) 50% 0 repeat fixed;
min-height: 1000px;
height: 730px;
margin: 0 auto;
width: 300%;
max-width: 2000px;
position: relative;
cursor:help;
}
我知道这很混乱,我一直在摸索试图让它以几种不同的方式工作。
我从这个鼠标滚轮示例 http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/#comment-301955获得了原始代码