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

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

看这个工作演示.

这是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从设置.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在页面加载时触发事件,因此容器从一开始就有适当的阴影.

希望这可以帮助!