元素div水平滚动答案

【问题标题】：element div horizontal scroll元素div水平滚动
【发布时间】：2013-12-11 16:05:13
【问题描述】：

当我的页面滚动（或鼠标滚轮）到达与顶部的特定距离时，我想滚动彩色 div。在 mozilla 中它可以工作，但在 chrome 和 ie 中，当 div“spostamento”时我有一个不好的效果已重新定位。您能帮我解决这个问题吗？谢谢

HTML

<div class="tutto" style="width:100%;position:relative;">
<div class="spostamento" style="position:absolute;width:100%;">
    <div style="width:100%;height:300px;background-color:#000000;">
    </div>
    <div class="enter" style="height:200px;width:100%;position:relative;overflow:hidden;">
        <div class="fascia" style="height:200px;">
            <div class="sposta" style="position:absolute;width:100%;left:0px;top:0px;height:200px;">
                <div class="first" style="position:absolute;left:0px;height:200px;width:300px;background-color:#0F3"></div>
                <div style="position:absolute;left:300px;height:200px;width:300px;background-color:#069"></div>
                <div style="position:absolute;left:600px;height:200px;width:300px;background-color:#C09"></div>
                <div style="position:absolute;left:900px;height:200px;width:300px;background-color:#6C6"></div>
                <div style="position:absolute;left:1200px;height:200px;width:300px;background-color:#00F"></div>
                <div style="position:absolute;left:1500px;height:200px;width:300px;background-color:#0F3"></div>
                <div style="position:absolute;left:1800px;height:200px;width:300px;background-color:#6C6"></div>
                <div style="position:absolute;left:2100px;height:200px;width:300px;background-color:#069"></div>
                <div style="position:absolute;left:2400px;height:200px;width:300px;background-color:#C09"></div>
                <div style="position:absolute;left:2700px;height:200px;width:300px;background-color:#6C6"></div>
                <div style="position:absolute;left:3000px;height:200px;width:300px;background-color:#00F"></div>
                <div style="position:absolute;left:3300px;height:200px;width:300px;background-color:#6C6"></div>
                <div style="position:absolute;left:3600px;height:200px;width:300px;background-color:#069"></div>
                <div style="position:absolute;left:3900px;height:200px;width:300px;background-color:#C09"></div>
                <div style="position:absolute;left:4200px;height:200px;width:300px;background-color:#6C6"></div>
                <div class="last" style="position:absolute;left:4500px;height:200px;width:300px;background-color:#0F3"></div>
            </div>
        </div>
    </div>
    <div style="width:100%;height:1000px;background-color:#000000;"></div>
</div>
</div>

脚本

$(document).ready(function(){
        var left=0;
        var lastScroll = 0;
        var dimensioneSpostamento=0;
        var distanzaFascia=$(".fascia").offset().top-200;
        $(".sposta > div").each(function(){
            dimensioneSpostamento +=$(this).width();
        });
        var dimensioneEffettiva=dimensioneSpostamento-$(window).width();
        $(".tutto").height(dimensioneEffettiva+300+1000);
        $(window).scroll(function (event) {
            var st = $(this).scrollTop();
            if(st>distanzaFascia&&st<dimensioneEffettiva){
                    $(".spostamento").css("top",st-distanzaFascia);
                    left +=st-lastScroll;
                    if (st > lastScroll) {
                        $(".sposta").css("left", -left);                
                    }
                    else {
                        $(".sposta").css("left", -left);
                    }
                lastScroll = st;
            }
        });
    });

【问题讨论】：

谢谢！我已经更正了我的帖子
附带说明，Scrollpath 是处理这类事情的绝佳插件

标签： jquery html scroll mousewheel

【解决方案1】：

我认为 Firefox 和 Chrome 之间的区别在于，Chrome 每次鼠标滚动一次滚动 100 像素，而 Firefox 默认启用平滑滚动，这会导致鼠标一次滚动多次滚动几个像素。

这会在您的示例中引起问题，因为当st 低于distanzaFascia 时，您没有将$(".spostamento").css("top") 设置回其原始值。您也可以在 Firefox 中获得相同的效果。但是它要轻得多。

试试下面的。我认为它应该可以解决问题：

if (st <= distanzaFascia) {
    $(".spostamento").css("top", 0);
    $(".sposta").css("left", 0);
}

这是您更新后的JSFiddle。

【讨论】：