Question

我有一个水平滚动div，当滚动时，我想在其'父#container div（最好是jQuery）上添加类。

如果div尚未滚动：

$('#container').addClass('shadow-right').removeClass('shadow-left');

如果div不在开头或结尾：

$('#container').addClass('shadow-right shadow-left');

如果容器一直滚动到最后：

$('#container').addClass('shadow-left').removeClass('shadow-right');

我已经设置了一个JSFiddle，其中包含一些基本的html / css，解释了我想要实现的目标：

http://jsfiddle.net/Y39z8/3/

我很感激我能得到任何帮助。谢谢！

Answer 1

See this working demo.

这是涉及的jQuery：

$(document).ready(function() {
    $("#scroll-container").on("scroll", function () {
        var cur = $(this).scrollLeft();
        if (cur == 0) {
            $('#container').addClass('shadow-right').removeClass('shadow-left');
        } 
        else {
            var max = $(this)[0].scrollWidth - $(this).parent().width();
            if (cur == max) {
                $('#container').addClass('shadow-left').removeClass('shadow-right');
            } else {
                $('#container').addClass('shadow-right shadow-left');
            }
        }
    });
    $("#scroll-container").trigger("scroll");
});

将当前scrollLeft()值与最大可用值进行比较，并相应地调整容器的类。

此外，您的CSS需要一些调整。当同时应用.shadow-left和.shadow-right时，.shadow-left只会覆盖来自box-shadow的{{1}}设置，结果只会导致.shadow-right左影。将最后一个语句添加到CSS的末尾将解决此问题（这是我在演示中所做的）：

#container.shadow-left.shadow-right {
    box-shadow: inset 7px 0px 10px -7px blue, inset -7px 0px 10px -7px blue;
    -webkit-box-shadow: inset 7px 0px 10px -7px blue, inset -7px 0px 10px -7px blue;
    -moz-box-shadow: inset 7px 0px 10px -7px blue, inset -7px 0px 10px -7px blue;
}

编辑：我对脚本进行了一些优化，因为它会快速运行，并添加了一个最后一行，在页面加载时触发scroll事件，因此容器已经从一开始就适当的影子。

希望这有帮助！

Answer 2

我认为this就是你想要的，在jQuery中使用滚动函数，你知道什么时候滚动项目

$('#container').addClass('shadow-right');  


$("#scroll-container").scroll(function(){
    $('#container').addClass('shadow-left');
    x=$("#scroll-container").scrollLeft();
    $("span").text(x);
    if(x==1014){
        x=0;
$('#container').removeClass('shadow-right');

    }
  });

滚动到结束和开始时，水平滚动添加类

2 个答案:

See this working demo.