我遇到了与 css3 多列布局和我在 jQuery 中构建的原始横向滚动相关的问题。当光标的位置位于列之间时,使用滚轮滚动似乎不起作用。我在当前的 Chrome (28) 中注意到了这个问题。当前的firefox(22)没有这个问题。
我目前正在调查为什么 jQuery nicescroll 插件不会出现这个问题。(由于其他原因我不能使用)
http://jsfiddle.net/mayhem_1980/Cf3PZ/
<section class="multi_column_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta purus id nunctincidunt, a pretium magna iaculis. Nunc sem odio, pretium ac accumsan id, condimentum quis ipsum. Etiam volutpat sapien eget magna venenatis, ut malesuada felis pellentesque. Mauris nec elit lectus. Proin id viverra lacus, quis condimentum nibh. Praesent ultricies ultrices tortor id fringilla. Donec sodales imperdiet dolor, non tincidunt mi mollis nec. Duis vitae ultrices enim.</p>
<p> </p>
*** Content in this section repeats a couple of times ***
</section>
$(function() {
var offset = 0;
var speed = 60;
$(window).bind("mousewheel DOMMouseScroll", function(e){
if (e.originalEvent.wheelDelta) {
scrollDirection = e.originalEvent.wheelDelta;
} else if (e.originalEvent.detail) {
scrollDirection = -e.originalEvent.detail;
} else {
alert("It's broken!");
}
if(scrollDirection > 0) {
offset = offset - speed;
$("body, html").scrollLeft(offset);
} else {
offset = offset + speed;
$("body, html").scrollLeft(offset);
}
});
});
.multi_column_content {
-webkit-column-width: 350px;
-moz-column-width: 350px;
column-width: 350px;
-webkit-column-gap: 48px;
-moz-column-gap: 48px;
column-gap: 48px;
max-width: none;
height: 40vh;
padding: 103px 0px 24px 0px;
text-align: justify;
background: yellow;
}