Add a class during Scroll

Question

Is there a way to execute a function (ie Add Class, Remove Class...) only during the time of Scrolling a Specific div.

For example

If i'm having a div with a height of 1000px and overflow: auto properties. I like to add a class on the time of scrolling only. If the user stops scrolling inside a div that class has to be removed.

Is there any way of writing jquery to this function...

score 2 · Answer 1 · edited May 23 '17 at 11:50

Yeah pretty much everything can be put inside .scroll() event handler from jQuery.

http://api.jquery.com/scroll/

And to detect stop check out this post :

Fire event after scrollling scrollbars or mousewheel with javascript

You basically set a Timeout to check if you are still scrolling and if not trigger the stopped scrolling event

EDIT: was funny to implement

var scrollChecker = null;
var scrollTimeout = null;

var createScrollEvents = function (e) {
    var $this = $(this);
    $this.data('scrolling', true);
    if (!scrollChecker) {
        $this.trigger('scrollStart');
        scrollChecker = setInterval(function () {
            if (!$this.data('scrolling')) {
                $this.trigger('scrollStop');
                clearTimeout(scrollChecker);
                scrollChecker = null;
            }
        }, 200);
    }
    $this.trigger('scrolling');
    if (scrollTimeout) {
        clearTimeout(scrollTimeout);
    }
    scrollTimeout = setTimeout(function () {
        $this.data('scrolling', false);
    }, 200);
};

$(function () {

    $('#mydiv')

        //init
        .scroll(createScrollEvents)

        //events
        .on('scrollStart', function (e) {
            console.log('start');
        })

        .on('scrollStop', function (e) {
            console.log('stop');
        })

        .on('scrolling', function (e) {
            console.log('scrolling');
        });
        //end
});

CSS

#mydiv {
    width:200px;
    height:200px;
    overflow : auto;
}

don't forget this, read .scroll() documentation :

It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

http://jsfiddle.net/techunter/LxTqY/

Manjunath Hegde · Answer 2 · 2013-08-27T09:37:29.180

0

$('#target').scroll(function() {
$('.ClassName').removeClass(ClassName);
$(this).addClass(ClassName);
});

edited Aug 27 '13 at 09:37

answered Aug 27 '13 at 09:15

Manjunath Hegde

404
4
21

1

@ManjunathHedge not at all..... with $('*') you will retrieve the whole DOM which is reallyyyyyyyyy time consuming – TecHunter Aug 27 '13 at 09:23
1

I think this will only work at Start of the scroll.... But after stoping scroll i have to trigger another function... – Jhonny Aug 27 '13 at 09:23
@Jhonny: Use Timer.. refet this post http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling $(window).scroll(function() { clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { // do something console.log("Haven't scrolled in 250ms!"); }, 250)); }); – Manjunath Hegde Aug 27 '13 at 09:28

score 0 · Answer 3 · answered Aug 27 '13 at 09:22

0

Demo

you can use Jquery .scroll() but overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

Or

You can use window.onscroll event

answered Aug 27 '13 at 09:22

Prabhakaran Parthipan

4,193
2
18
27

window.onscroll event will not work bcoz i need scroll inside the div – Jhonny Aug 27 '13 at 09:25
so you need to use jquery scroll event but overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents). – Prabhakaran Parthipan Aug 27 '13 at 09:26
Yeah but scroll only trigger event on starting the scroll but here i need some function on stoping the scroll function.... – Jhonny Aug 27 '13 at 09:27

Add a class during Scroll

3 Answers3