CODEWITHSUNDEEP
javascriptjqueryscroll
lukaleli
lukaleli

Reputation: 3627

how to prevent jumping site when scrolling?

I'm trying to write mechanism on site which prevents users to scroll normally. When user scrolls down or up the site is smoothscrolling to next or previous slide (depends on scrolling direction) and stops there (like when you click on a navbar). See live preview: CLICK HERE

But there's an annoying problem. It works almost good in FF (no jumping), but breaks in another browsers (Chrome, Safari, IE)- it jumps. How can I prevent this?Here are snippets from my code. I have a ScrollControl object where I prevent scrolling:

scrollControl = {
    keys : [32, 37, 38, 39, 40],

    scrollTimer : 0,

    lastScrollFireTime : 0,

    preventDefault  :   function(e){
                            e = e || window.event;
                            if (e.preventDefault)
                              e.preventDefault();
                            e.returnValue = false;
                        },

    keydown :   function(e){
                    for (var i = scrollControl.keys.length; i--;) {
                        if (e.keyCode === scrollControl.keys[i]) {
                            scrollControl.preventDefault(e);
                            return;
                        }
                    }
                },

    wheel   :   function(e){
                    scrollControl.preventDefault(e);
                },

    disableScroll   :   function(){
                            if (window.addEventListener) {
                                  window.addEventListener('DOMMouseScroll', scrollControl.wheel, false);
                              }
                              window.onmousewheel = document.onmousewheel = scrollControl.wheel;
                              document.onkeydown = scrollControl.keydown;
                        },

    enableScroll    :   function(){
                            if (window.removeEventListener) {
                                window.removeEventListener('DOMMouseScroll', scrollControl.wheel, false);
                            }
                            window.onmousewheel = document.onmousewheel = document.onkeydown = null;
                        }   

}

Then I'm listening if mousewheel occurs and trying to execute function only once (I'm using this plugin to detect mousewheel PLUGIN )

$(window).mousewheel(function(objEvent, intDelta){

    var minScrollTime = 1000;
    var now = new Date().getTime();

    function processScroll() {
        console.log("scrolling");
        if(intDelta>0){
        $.smoothScroll({
                speed:med.effectDuration, 
                easing:med.scrollEase, 
                scrollTarget:med.prevPage,
                afterScroll: function(){
                                med.currentPage = med.prevPage;
                                med.setActiveNav();
                                med.setSlides();
                                med.runAnimations();

                            }});
        }else if(intDelta<0){
            //scrollControl.disableScroll();
                $.smoothScroll({
                        speed:med.effectDuration, 
                        easing:med.scrollEase, 
                        scrollTarget:med.nextPage,
                        afterScroll: function(){
                                        med.currentPage = med.nextPage;
                                        med.setActiveNav();
                                        med.setSlides();
                                        med.runAnimations();

                                    }});
        }
    }

    if (!scrollControl.scrollTimer) {
        if (now - scrollControl.lastScrollFireTime > (3 * minScrollTime)) {
            processScroll();   // fire immediately on first scroll
            scrollControl.lastScrollFireTime = now;
        }
        scrollTimer = setTimeout(function() {
            scrollControl.scrollTimer = null;
            scrollControl.lastScrollFireTime = new Date().getTime();
            processScroll();
        }, minScrollTime);
    }



});

I'm executing scrollControl.disableScroll function on DOM ready event when users starts website. And actually scrolling once prevention doesn't works prefectly and sometimes it triggers smoothscrolling twice. What am I doing wrong? Thanks in advance for any suggestions!

Upvotes: 0

Views: 1172

Answers (2)

Rosmarine Popcorn
Rosmarine Popcorn

Reputation: 10967

I had the same issue the Mouse Wheel Event was fired Twice.

function wheelDisabled(event){

    event.preventDefault();
    event.stopImmediatePropagation();
    return false;
}

Also you might use both of these Events.

window.addEventListener('DOMMouseScroll', wheel, false);
window.addEventListener('mousewheel', wheel, false);

Upvotes: 1

richardaday
richardaday

Reputation: 2864

Instead of trying to prevent scrolling with Javascript, I would try a different approach. This approach includes CSS and Javascript to make sure the website is never bigger then the viewport (hence no scrollbars!).

Use CSS to force the main wrapping div (a div that wraps all the content on the site) to have overflow: hidden. Then use Javascript to dynamically ensure that the height and width of this div is always equal to the viewport's height and width.

In this scenario, if you want to implement scrolling in a predefined way you choose you can dynamically add negative margin-top (or negative margin-left for horizontal scrolling) to the parent wrapping div to give it the appearance that it is scrolling.

Upvotes: 0

Related Questions