jquery - 带有 jQ​​uery 水平滚动条的 CSS3 多列布局不能在列之间使用滚轮

Question

我遇到了与 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>&nbsp;</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;
}

Answer 1

在我看来，您应该使用变通方法，因为它是一个似乎没有得到均匀支持的 CSS 属性。

尝试在这些段落上添加一些 padding 而不是 column-gap。

举个例子: http://jsfiddle.net/ypjF6/

对我来说很管用!

margins 也应该根据您的需要/想要的内容工作。