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;
}