Question

如何修改我的脚本以便检测边缘而不是滚动超过容器宽度？

包括标记和JS以及JSFiddle - http://jsfiddle.net/carlozdre/4HSLb/8/

<div id="content">
          <div class="inner">
          <img src="http://lorempixum.com/300/300" />
          <img src="http://lorempixum.com/300/300" />
          <img src="http://lorempixum.com/300/300" /> 
          <img src="http://lorempixum.com/300/300" />
          <img src="http://lorempixum.com/300/300" />
          <img src="http://lorempixum.com/300/300" />
          </div>
</div>

<div style="">
 <a class="left" href="#">LEEEEFT</a>
 <a class="right" href="#">RIGHHHT</a>
</div>

<style>
#content { float: left; width: 600px; overflow: scroll; white-space: nowrap; max-width: 3000px;}
.inner {width: 300px;}
</style>

$(function () {
    $('.left').click(function (e) {
        e.preventDefault();
        $('.inner').animate({
            marginLeft: "-=" + 20 + "px"
        }, 'fast');

    });


    $('.right').click(function (e) {
        e.preventDefault();
        $('.inner').animate({
            marginLeft: "+=" + 20 + "px"
        }, 'fast');

    });

});

Answer 1

您需要进行一些更改以确保内部容器的大小固定为其中的图像大小，然后检查内部容器的左右位置。

您也可以更好地设置特定坐标的动画，而不是添加或减去前一个坐标，因为它可以更好地处理快速点击。

工作示例：http://jsfiddle.net/4HSLb/13/

<强>标记：

<div id="content">
    <div class="inner">
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
        <img src="http://lorempixum.com/300/300" />
    </div>
</div>
<div style=""> <a class="left" href="#">LEEEEFT</a>
 <a class="right" href="#">RIGHHHT</a>

</div>

<强> CSS：

#content {
    float: left;
    width: 610px;
    overflow: hidden;
    white-space: nowrap;
    max-width: 3000px;
}
.inner {
    background:#444;
    height:300px;
}
.inner img {
    float:left;
    margin-right:10px;
}

<强>脚本：

var left = 0;
var contentWidth = 0;
var innerWidth = 0;
var imgCount = 0;
var imgWidth = 310;

$(function () {
    contentWidth = parseInt($('#content').innerWidth());
    left = parseInt($('.inner').css('margin-left'));
    imgCount = $('.inner img').size()
    innerWidth = parseInt(imgCount * imgWidth);

    $('.inner').width(innerWidth + "px");

    $('.left').click(function (e) {
        e.preventDefault();
        updatePos(imgWidth);
        if (left <= 0) {
            $('.inner').animate({
                marginLeft: left + "px"
            }, 'fast');
        }
    });

    $('.right').click(function (e) {
        e.preventDefault();
        updatePos(0 - imgWidth);
        if (left >= 0 - innerWidth + (imgWidth * 2)) {
            $('.inner').animate({
                marginLeft: left + "px"
            }, 'fast');
        }
    });

});

function updatePos(distance) {
    console.log("NewPos: " + (left + distance));
    console.log(0 - innerWidth);
    if (left + distance <= 0 && left + distance >= 0 - innerWidth + (imgWidth * 2)) {
        left = left + distance;
    }
    //console.log(left);
}

修改更新以防止快速单击时过度滚动。

编辑2： 更新了代码，以便轻松更改视图中的图像数量。而不是编辑上面的示例代码，这是一个关于jsFiddle的示例：http://jsfiddle.net/4HSLb/14/

水平滚动条边缘检测

1 个答案: