1

我有一个水平滚动 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');

我用一些基本的 html/css 设置了一个 JSFiddle，解释了我要完成的工作：

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

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

4

2 回答 2

5

请参阅此工作演示。

这是涉及的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时， then.shadow-left将简单地覆盖来自的box-shadow设置.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在页面加载时触发一次事件，因此容器从一开始就有适当的阴影。

希望这可以帮助！

于 2013-09-20T18:52:38.673 回答
0

我认为这就是您想要的，使用 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');

    }
  });
于 2013-09-20T19:30:01.850 回答