javascript - Horizontal scroll add class when scrolled to end and beginning - Stack Overflow

admin管理员组

文章数量:1420220

I have a horizontal scrolling div that, when scrolled, I want to add classes on its' parent #container div (with jQuery preferably).

If the div hasn't yet been scrolled:

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

If the div isn't at the beginning or the end:

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

and if the container is scrolled all the way to the end:

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

I've set up a JSFiddle with some basic html/css explaining what I'm trying to acplish:

/

I'd appreciate any help I can get. Thanks!

I have a horizontal scrolling div that, when scrolled, I want to add classes on its' parent #container div (with jQuery preferably).

If the div hasn't yet been scrolled:

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

If the div isn't at the beginning or the end:

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

and if the container is scrolled all the way to the end:

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

I've set up a JSFiddle with some basic html/css explaining what I'm trying to acplish:

http://jsfiddle/Y39z8/3/

I'd appreciate any help I can get. Thanks!

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Sep 20, 2013 at 18:36 Joel EckrothJoel Eckroth 2,53433 gold badges2020 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

See this working demo.

Here's the jQuery involved:

$(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");
});

This pares the current scrollLeft() value to the maximum available value, and adjusts the classes of the container accordingly.

Additionally, your CSS needed some adjustment. When both .shadow-left and .shadow-right were applied, then .shadow-left would simply override the box-shadow setting from .shadow-right, resulting in only a left shadow. Adding this last statement to the end of your CSS will fix this (which is what I did in the demo):

#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;
}

Edit: I optimized the script a little, since it will be running rapidly, and added a final line that triggers the scroll event once when the page loads, so the container has the appropriate shadow from the very beginning.

Hope this helps!

I think this is what you want,with scroll function in jQuery you know when item is scrolled

$('#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');

    }
  });

本文标签： javascriptHorizontal scroll add class when scrolled to end and beginningStack Overflow