Jquery scroll plugin scrolls down only

Question

Im making a plugin with jquery and it makes use of a mouse scroll event. The problem is i get it scrolls down even when im scrolling up.

Here i got my code

HTML:

     <body>
        <!-- <div id="element"></div> -->
        <div id='wrapper'>
            <img id='img1' src='./images/image1.jpg'>
        </div>

        <script>
            $(document).ready(function()
            {
                $(document).scrollPage();
            });
        </script>
    </body>

Javascript:

$.extend(Plugin.prototype, {
        init: function () {
            document.addEventListener('scroll', this.checkScroll);
        },
        checkScroll: function(event) {
            //Guess the delta.
            var delta = 0;

            if (event.wheelDelta) {
                delta = event.wheelDelta/120;
            }
            else if (event.detail) {
                delta = -event.detail/3;
            }

            if(delta / 120 > 0){
                console.log('up');
            }
            else{
                console.log('down');
            }
        }
    });

Somehow when i scroll the code always come in the else statement console.log('down');

is the formula delta / 120 > 0 wrong in this code?

its because your delta always is equal to 0. 'event.wheelDelta' and 'event.detail' are undefined. you should attach 'onmousewheel ' listener. — Ararat Harutyunyan, Nov 02 '15 at 13:54

score 0 · Answer 1 · answered Nov 02 '15 at 13:40

0

Check current scrollTop vs previous scrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

answered Nov 02 '15 at 13:40

Silver Ringvee

5,037
5
28
46

When i scroll down the first rule is what i get in my console.. when i scroll back up i got all those other lines in my console which are marked here.. i have only scrolled once down and once back up then http://imgur.com/kqz6dHW – Sam Nov 02 '15 at 13:48

score 0 · Answer 2 · answered Nov 02 '15 at 13:49

My solution for:

/**
 * Plugin that makes the screen scroll particular component visible on the screen
 */
$.fn.scrollTo = function() {
    var isVisibleOnScreen = function(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    };

    if(!isVisibleOnScreen(this)){
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this; // for chaining...
    }
};

Usage:

$('#top').scrollTo();

score 0 · Accepted Answer · answered Nov 02 '15 at 14:01

i fixed it this way:

$.extend(Plugin.prototype, {
    init: function () {

        var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';

        if (document.attachEvent){
            document.attachEvent('on'+mousewheelevt, function(e){scroller(e)});
        }
        else if (document.addEventListener){
            document.addEventListener(mousewheelevt, function(e){scroller(e)},false);
        }

        function scroller(evt)
        {
            //Guess the delta.
            var delta = 0;

            if (!evt) evt = window.event;
            if (evt.wheelDelta) {
                delta = evt.wheelDelta/120;
            }
            else if (evt.detail) {
                delta = -evt.detail/3;
            }

            if(delta /120 > 0){
                console.log('up');
            }

            else{
                console.log('down');
            }
        }
    }
});

Browser sniffing isn't great. There's a better event out there now : http://stackoverflow.com/a/33334461/3168107. — Shikkediel, Nov 02 '15 at 14:59

Jquery scroll plugin scrolls down only

3 Answers3