1

我遇到了与 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;
}
4

1 回答 1

1

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

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

这是一个例子:http: //jsfiddle.net/ypjF6/

对我来说它有效!

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

于 2013-07-30T10:28:10.080 回答