Hoe kan ik scrollen tijdelijk uitschakelen?

Ik gebruik de plug-in scrollTo jQuery en zou graag willen weten of het op de een of andere manier mogelijk is om het scrollen op het vensterelement tijdelijk uit te schakelen via Javascript? De reden dat ik scrollen wil uitschakelen, is dat wanneer je scrolt terwijl scrollTo aan het animeren is, het echt lelijk wordt;)

Natuurlijk zou ik een $("body").css("overflow", "hidden");kunnen doen en het dan weer op automatisch kunnen zetten wanneer de animatie stopt, maar het zou het zou beter zijn als de schuifbalk nog steeds zichtbaar maar inactief was.

Antwoord 1, autoriteit 100%

Het evenement scrollkan niet worden geannuleerd. Maar u kunt dit doen door annulerendeze interactiegebeurtenissen:
Muis&Tik op scrollenen knoppendie horen bij scrollen.

[Werkdemo]

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
  e.preventDefault();
}
function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}
// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; } 
  }));
} catch(e) {}
var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}
// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

Update: vaste chrome-desktop en moderne mobiele browsers met passieve luisteraars

Antwoord 2, Autoriteit 58%

Doe het gewoon door een klasse aan het lichaam toe te voegen:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

Voeg de klas toe en verwijder dan wanneer u opnieuw scrollen wilt inschakelen, getest in IE, FF, Safari en Chrome.

$('body').addClass('stop-scrolling')

Voor Mobile-apparaten , u moet de touchmoveevenement verwerken:

$('body').bind('touchmove', function(e){e.preventDefault()})

en upind om scrollen opnieuw in te schakelen. Getest in iOS6 en Android 2.3.3

$('body').unbind('touchmove')

Antwoord 3, Autoriteit 8%

Hier is een heel eenvoudige manier om het te doen:

window.onscroll = function () { window.scrollTo(0, 0); };

Het is een beetje springerig in IE6.

Antwoord 4, Autoriteit 6%

De volgende oplossing is eenvoudig maar puur JavaScript (geen jQuery):

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}
function enableScrolling(){
    window.onscroll=function(){};
}

Antwoord 5, autoriteit 3%

Deze oplossing behoudt de huidige schuifpositie terwijl scrollen is uitgeschakeld, in tegenstelling tot sommige die de gebruiker terug naar boven laten springen.

Het is gebaseerd op het antwoord van galambalazs’, maar met ondersteuning voor aanraakapparaten en geherstructureerd als een enkel object met de jQuery-plug-in omslag.

Demo hier.

Op github hier.

/**
 * $.disablescroll
 * Author: Josh Harrison - aloof.co
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */
;(function($) {
    "use strict";
    var instance, proto;
    function UserScrollDisabler($container, options) {
        // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
        // left: 37, up: 38, right: 39, down: 40
        this.opts = $.extend({
            handleKeys : true,
            scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
        }, options);
        this.$container = $container;
        this.$document = $(document);
        this.lockToScrollPos = [0, 0];
        this.disable();
    }
    proto = UserScrollDisabler.prototype;
    proto.disable = function() {
        var t = this;
        t.lockToScrollPos = [
            t.$container.scrollLeft(),
            t.$container.scrollTop()
        ];
        t.$container.on(
            "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
            t._handleWheel
        );
        t.$container.on("scroll.disablescroll", function() {
            t._handleScrollbar.call(t);
        });
        if(t.opts.handleKeys) {
            t.$document.on("keydown.disablescroll", function(event) {
                t._handleKeydown.call(t, event);
            });
        }
    };
    proto.undo = function() {
        var t = this;
        t.$container.off(".disablescroll");
        if(t.opts.handleKeys) {
            t.$document.off(".disablescroll");
        }
    };
    proto._handleWheel = function(event) {
        event.preventDefault();
    };
    proto._handleScrollbar = function() {
        this.$container.scrollLeft(this.lockToScrollPos[0]);
        this.$container.scrollTop(this.lockToScrollPos[1]);
    };
    proto._handleKeydown = function(event) {
        for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
            if (event.keyCode === this.opts.scrollEventKeys[i]) {
                event.preventDefault();
                return;
            }
        }
    };
    // Plugin wrapper for object
    $.fn.disablescroll = function(method) {
        // If calling for the first time, instantiate the object and save
        // reference. The plugin can therefore only be instantiated once per
        // page. You can pass options object in through the method parameter.
        if( ! instance && (typeof method === "object" || ! method)) {
            instance = new UserScrollDisabler(this, method);
        }
        // Instance already created, and a method is being explicitly called,
        // e.g. .disablescroll('undo');
        else if(instance && instance[method]) {
            instance[method].call(instance);
        }
    };
    // Global access
    window.UserScrollDisabler = UserScrollDisabler;
})(jQuery);

Antwoord 6, autoriteit 2%

Het spijt me dat ik een oud bericht moet beantwoorden, maar ik was op zoek naar een oplossing en kwam deze vraag tegen.

Er zijn veel oplossingen voor dit probleem om de schuifbalk nog steeds weer te geven, zoals de container een hoogte van 100% geven en een overflow-y: scroll-stijl.

In mijn geval heb ik zojuist een div gemaakt met een schuifbalk die ik weergeef terwijl ik overflow: hiddenaan de body toevoeg:

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

De schuifbalk van het element moet deze stijlen hebben:

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

Dit toont een grijze schuifbalk, hopelijk helpt het toekomstige bezoekers.

Antwoord 7, autoriteit 2%

var winX = null;
var winY = null;
window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});
function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
}
function enableWindowScroll() {
    winX = null;
    winY = null;
}

Antwoord 8

Ik was op zoek naar een oplossing voor dit probleem, maar was niet tevreden met een van de bovenstaande oplossingen (op het moment van schrijven van dit antwoord), dus bedacht ik deze oplossing..

CSS

.scrollDisabled {   
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;
}

JS

var y_offsetWhenScrollDisabled=0;
function disableScrollOnBody(){
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);
}

Antwoord 9

Nee, ik zou niet voor het afhandelen van evenementen gaan omdat:

• niet alle evenementen zullen gegarandeerd een succes worden,

• door tekst te selecteren en naar beneden te bewegen, wordt het document daadwerkelijk gescrolld,

• Als in de fase van de gebeurtenis het losmaken misgaat, ben je gedoemd.

Ik heb hieraan gebeten door een kopieer-plak actie te maken met een verborgen tekstgebied en raad eens, de pagina scrollt wanneer ik kopieer omdat ik intern het tekstgebied moet selecteren voordat ik document.execCommand('copy').

Hoe dan ook, dat is de manier waarop ik ga, let op de setTimeout():

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

Er is sprake van een knipperend momentum wanneer de schuifbalken even verdwijnen, maar dat is acceptabel, denk ik.

Antwoord 10

Volgens de galambalazs-post zou ik ondersteuning voor aanraakapparaten toevoegen, zodat we kunnen aanraken, maar niet omhoog of omlaag scrollen:

function disable_scroll() {
   ...
   document.ontouchmove = function(e){ 
        e.preventDefault(); 
   }
}
function enable_scroll() {
   ...
   document.ontouchmove = function(e){ 
     return true; 
   }
}

Antwoord 11

Vanaf Chrome 56 en andere moderne browsers moet je passive:falsetoevoegen aan de addEventListener-aanroep om preventDefaultte laten werken. Dus ik gebruik dit om te stoppen met scrollen op mobiel:

function preventDefault(e){
    e.preventDefault();
}
function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}

Antwoord 12

Afhankelijk van wat u met de verwijderde scroll wilt bereiken, kunt u het element waarvan u de scroll wilt verwijderen repareren (door erop te klikken, of welke andere trigger u ook tijdelijk wilt deactiveren)

Ik was op zoek naar een “temp no scroll”-oplossing en voor mijn behoeften loste dit het op

maak een les

.fixed{
    position: fixed;
}

vervolgens met JQuery

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from
contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class
//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){
    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');
    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

vond dat dit een eenvoudig genoeg oplossing die goed werkt op alle browsers, maar ook zorgt voor eenvoudig gebruik in draagbare apparaten (d.w.z. iPhones, tabletten etc). Aangezien het element tijdelijk wordt bevestigd, is er geen rol:)

LET OP! Afhankelijk van de plaatsing van uw “contentContainer” element moet u aan te passen vanaf de linkerkant. Die gemakkelijk kan worden gedaan door het toevoegen van een css links waarde op dat element wanneer de vaste klasse is actief

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});

Antwoord 13

Ik gebruik showModalDialog , voor het tonen van de secundaire pagina als modaal dialoogvenster .

om hoofdvenster schuifbalken verbergen:

document.body.style.overflow = "hidden";

en bij het sluiten modaal dialoogvenster toont hoofdvenster schuifbalken:

document.body.style.overflow = "scroll";

Om toegang te krijgen tot elementen in het hoofdvenster van dialoogvenster:

parent.document.getElementById('dialog-close').click();

Alleen voor iedereen die op zoek is naar showmodaldialog 🙁 na regel 29 van het origineel code)

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});

Antwoord 14

een andere oplossing:

body {
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}

Op deze manier heb je altijd een verticale schuifbalk, maar omdat de meeste van mijn inhoud langer is dan de viewport, is dit OK voor mij. Inhoud is gecentreerd met een aparte div, maar zonder weer marge in het lichaam te plaatsen, zou mijn inhoud aan de linkerkant blijven.

Dit zijn de twee functie die ik gebruik om mijn pop-up / modal weer te geven:

var popup_bodyTop = 0;
var popup_bodyLeft = 0;
function popupShow(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    // remember current scroll-position
    // because when setting/unsetting position: fixed to body
    // the body would scroll to 0,0
    popup_bodyLeft = $(document).scrollLeft();
    popup_bodyTop  = $(document).scrollTop();
    // invert position
    var x = - popup_bodyLeft;
    var y = - popup_bodyTop;
    $('body').css('position', 'fixed');
    $('body').css('top', y.toString() +'px');
    $('body').css('left', x.toString() +'px');
}
function popupHide(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    $('body').css('position', '');
    $('html, body').scrollTop(popup_bodyTop);
    $('html, body').scrollLeft(popup_bodyLeft);
}

Resultaat: niet-scrollable achtergrond en geen herpositionering van de inhoud vanwege de linkerschuifbalk. Getest met huidige FF, Chrome en IE 10.

Antwoord 15

Hoe zit het? (Als u jQuery gebruikt)

var $window = $(window);
var $body = $(window.document.body);
window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();
    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

Antwoord 16

Het annuleren van de gebeurtenissen zoals in het geaccepteerde antwoord is een vreselijke methode naar mijn mening: /

In plaats daarvan heb ik position: fixed; top: -scrollTop();hieronder.

Demo: https://jsfiddle.net/w9w9hthy/5/

Van mijn JQuery Popup-project: https://github.com/seahorepip/jpopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}
//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

Deze code houdt rekening met de breedte, hoogte, schuifbalk en paginasprong.

Mogelijke problemen opgelost met bovenstaande code:

• breedte, bij het instellen van de positie kan de breedte van het html-element kleiner zijn dan 100%
• hoogte, hetzelfde als hierboven
• schuifbalk, bij het instellen van de positie heeft de pagina-inhoud niet langer een schuifbalk, zelfs niet als deze een schuifbalk had voordat dit resulteerde in een horizontale paginasprong
• pagejump, bij het instellen van de positie is de pagina scrollTop niet langer effectief, wat resulteert in een verticale paginasprong

Als iemand verbeteringen heeft aan de code voor het bevriezen/opheffen van de pagina hierboven, laat het me dan weten, zodat ik die verbeteringen aan mijn project kan toevoegen.

Antwoord 17

Dit is de eenvoudigste oplossing die ik tot nu toe heb gekregen. En geloof me, ik heb alle andere geprobeerd en dit is de gemakkelijkste. Het werkt geweldig op Windows-apparaten, waarbij de pagina van rechts wordt gepusht om ruimte te hebben voor de systeemschuifbalk en IOS-apparatendie geen ruimte nodig hebben voor hun schuifbalken in de browsers . Dus door dit te gebruiken hoef je rechts geen opvulling toe te voegen, zodat de pagina niet flikkert wanneer je de overloop van de body of html verbergt met css.

De oplossing is vrij eenvoudig als je erover nadenkt. Het idee is om de window.scrollTop()exact dezelfde positie te geven op het moment dat een pop-up wordt geopend. Verander ook die positie wanneer het venster van grootte verandert (aangezien de schuifpositie verandert zodra dat gebeurt).

Dus daar gaan we…

Laten we eerst de variabele maken die u laat weten dat de pop-up open is en deze stopWindowScrollnoemen. Als we dit niet doen, krijgt u een foutmelding van een niet-gedefinieerde variabele op uw pagina en stelt u deze in op 0 – als niet actief.

$(document).ready(function(){
    stopWindowScroll = 0;
});

Laten we nu de open pop-upfunctie maken die elke functie in uw code kan zijn die de pop-up activeert die u als plug-in of gewoonte gebruikt. In dit geval is het een eenvoudige aangepaste pop-up met een eenvoudige document-on-klik-functie.

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

Dus het volgende dat we doen, is de pop-upfunctie sluiten, die ik nogmaals herhaal, kan elke functie zijn die je al hebt gemaakt of gebruikt in een plug-in. Het belangrijkste is dat we die 2 functies nodig hebben om de variabele stopWindowScrollin te stellen op 1 of 0 om te weten wanneer deze open of gesloten is.

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

Laten we vervolgens de window.scroll-functie maken, zodat we het scrollen kunnen voorkomen zodra de hierboven genoemde stopWindowScrollis ingesteld op 1 – als actief.

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

Dat is het. Er is geen CSS vereist om dit te laten werken, behalve uw eigen stijlen voor de pagina. Dit werkte als een tierelier voor mij en ik hoop dat het jou en anderen helpt.

Hier is een werkend voorbeeld op JSFiddle:

JS Fiddle-voorbeeld

Laat me weten of dit heeft geholpen. Met vriendelijke groet.

Antwoord 18

Voortbouwend op het antwoord van Cheyenne Forbes, en een die ik hier via fcalderan vond: Gewoon uitschakelen scroll niet verbergen?
en om Hallodom’s probleem van het verdwijnen van de schuifbalk op te lossen

CSS:

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

Deze code brengt je naar de bovenkant van de pagina, maar ik denk dat de code van fcalderan een tijdelijke oplossing heeft.

Antwoord 19

Ik heb hetzelfde probleem, hieronder is hoe ik het aanpak.

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");
/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

hoop dat dit helpt.

Antwoord 20

De eenvoudigste methode is:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

Om het ongedaan te maken:

$("body").css("overflow", "auto");

Eenvoudig te implementeren, maar het enige nadeel is:

• De pagina springt iets naar links als deze in het midden is uitgelijnd (horizontaal).

Dit komt doordat de schuifbalk is verwijderd en het kijkvenster wat breder is geworden.

Antwoord 21

Hier is mijn oplossing om het scrollen te stoppen (geen jQuery). Ik gebruik het om het scrollen uit te schakelen wanneer het zijmenu verschijnt.

<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
  if(noscroll_var){
    document.getElementsByTagName("html")[0].style.overflowY = "";
    document.body.style.paddingRight = "0";
    noscroll_var = false
  }else{
    document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
    document.body.style.paddingRight = "17px";
    noscroll_var = true
  }
}/*noscroll()*/
</script>
<!-- Just to fill the page -->
<script>
  for(var i=0; i <= 80; i++){
    document.write(i + "<hr>")
  }
</script>

export function toggleBodyScroll(disable) {
  if (!window.tempScrollTop) {
    window.tempScrollTop = window.pageYOffset; 
    // save the current position in a global variable so I can access again later
  }
  if (disable) {
    document.body.classList.add('disable-scroll');
    document.body.style.top = `-${window.tempScrollTop}px`;
  } else {
    document.body.classList.remove('disable-scroll');
    document.body.style.top = `0px`;
    window.scrollTo({top: window.tempScrollTop});
    window.tempScrollTop = 0;
  }
}

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

$('body').addClass('stop-scrolling').css('margin-right', 8);

$('body').removeClass('stop-scrolling').css('margin-right', 0);

var sctollTop_length = 0;
function scroll_pause(){
  sctollTop_length = $(window).scrollTop();
  $("body").css("overflow", "hidden");
}
function scroll_resume(){
  $("body").css("overflow", "auto");
  $(window).scrollTop(sctollTop_length);
}

class DomUtils {
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };
  static preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }
  static preventDefaultForScrollKeys(e) {
    if (DomUtils.keys[e.keyCode]) {
      DomUtils.preventDefault(e);
      return false;
    }
  }
  static disableScroll() {
    document.addEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Disable scrolling in Chrome
    document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
      passive: false,
    });
  }
  static enableScroll() {
    document.removeEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Enable scrolling in Chrome
    document.removeEventListener(
      'keydown',
      DomUtils.preventDefaultForScrollKeys,
      {
        passive: false,
      }
    ); // Enable scrolling in Chrome
  }
}

.no-scroll{
  overflow: hidden;
}

let toggle_scrolling_state = () => {
   element.classList.toggle("no-scroll");
}

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});

var events = {
  preventDefault: function(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;  
  },
  //spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
  //left: 37, up: 38, right: 39, down: 40
  keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
  keydown: function(e) {
    for (var i = events.keys.length; i--;) {
      if (e.keyCode === events.keys[i]) {
        events.preventDefault(e);
        return;
      }
    }
  },
  wheel: function(e) {
    events.preventDefault(e);
  },
  disable: function() {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = events.wheel;
    document.onkeydown = helpers.events.keydown;
  },
  enable: function() {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
  }
}

function setMouseEvents(canvas) {
  var useCapture = false;
  //Mouse enter event
  canvas.addEventListener('mouseenter', function(event) {
    events.disable();
  }, useCapture);
  //Mouse leave event
  canvas.addEventListener('mouseleave', function(event) {
    events.enable();
  }, useCapture);
}

function disableRightClickMenu(canvas) {
  var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
  my_gradient.addColorStop(0, "white");
  my_gradient.addColorStop(1, "white");
  canvas.context.fillStyle = my_gradient;
  canvas.context.fillRect(0, 0, canvas.width, canvas.height);
  canvas.oncontextmenu = function() { return false; };
}

//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
    window.scrollTo(xPosition, yPosition);
}, 1);
//animate the element emt
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //when animation completes, we stop the timer
    clearInterval(restoreTimer);
});

//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//disable scrolling
window.onscroll = function() {
    window.scrollTo(xPosition, yPosition);
};
//animate and enable scrolling when animation is completed
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //enable scrolling when animation is done
    window.onscroll = function() {};
});