Question

我改编this code来创建一个大的div，它在一个较小的div内水平滚动，具体取决于鼠标的位置。

你可以在这里看到我的例子.. http://thetally.efinancialnews.com/tallyassets/20years/index.html

我想要实现的是内部（黄色）div最多停在左边：0px，换句话说，黄色div的最左边会粘在外部div的最左边如果你走那么远。

我尝试使用＆＃39; if else＆＃39;声明，但是因为这段代码每30秒运行一次就会产生一个奇怪的结果，我无法找到解决方案。我确定它非常简单，但它难倒我

你可以在这里看到我的代码......

var x=0, 
rate=0,
maxspeed=10;
var backdrop = $('.container');
var years = $('.events');

$('.direction', backdrop).mousemove(function(e){
    var $this = $(this);
    var left = $this.is('.left');
    if (left){
        var w = $this.width();
        rate = (w - e.pageX - $(this).offset().left + 1)/w;
    } else {
        var w = $this.width();
        rate = -(e.pageX - $(this).offset().left + 1)/w;
    }
});

backdrop.hover(function(){
    var scroller = setInterval( moveBackdrop, 30 );
    $(this).data('scroller', scroller);
},
function(){
    var scroller = $(this).data('scroller');
    clearInterval( scroller );
});   

function moveBackdrop(){
    if ( parseInt(years.css("left"), 10) <= 0 ) {
        x += maxspeed * rate;
        var newpos = x+'px';
        years.css('left',newpos);
    } else {
        years.css('left','0');
    }
}

有问题的代码就在这里^

Answer 1

这是你想要做的吗？

function moveBackdrop(){
    if ( parseInt(years.css("left"), 10) <= 0 && rate < 0 ) {
        // Means that the element is already at left: 0 or less,
        // and we are trying to move it even more left with rate being negative.
        // So keep the element at left: 0
        years.css('left','0');
    } else {
        x += maxspeed * rate;
        var newpos = x+'px';
        years.css('left',newpos);
    }
}

未来的额外注意事项：parseInt默认情况下使用10，所以parseInt（＆＃34; 20px＆＃34;）将等于20

最终编辑：啊，有一种更好的方法可以做到。

function moveBackdrop(){
    x += maxspeed * rate;
    if( x < 0 ) x = 0; // If left less than 0, fix it at 0
    var newpos = x+'px';
    years.css('left',newpos);
}

停止div滚动超过设定位置

1 个答案: