Come disabilitare temporaneamente lo scorrimento?

Sto usando il plugin scrollTo jQuery e vorrei sapere se è in qualche modo ansible disabilitare temporaneamente lo scrolling dell’elemento della finestra tramite Javascript? Il motivo per cui mi piacerebbe disabilitare lo scorrimento è che quando si scorre mentre scrollTo è in animazione, diventa davvero brutto;)

Certo, potrei fare un $("body").css("overflow", "hidden"); e poi rimetterlo su auto quando l’animazione si interrompe, ma sarebbe meglio se la barra di scorrimento fosse ancora visibile ma intriggers.

L’evento di scroll non può essere annullato. Ma puoi farlo cancellando questi eventi di interazione:
Mouse e touch scroll e pulsanti associati allo scorrimento.

[ Demo di lavoro ]

 // 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 = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function preventDefaultForScrollKeys(e) { if (keys[e.keyCode]) { preventDefault(e); return false; } } function disableScroll() { if (window.addEventListener) // older FF window.addEventListener('DOMMouseScroll', preventDefault, false); window.onwheel = preventDefault; // modern standard window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE window.ontouchmove = preventDefault; // mobile document.onkeydown = preventDefaultForScrollKeys; } function enableScroll() { if (window.removeEventListener) window.removeEventListener('DOMMouseScroll', preventDefault, false); window.onmousewheel = document.onmousewheel = null; window.onwheel = null; window.ontouchmove = null; document.onkeydown = null; } 

Fallo semplicemente aggiungendo una class al corpo:

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

Aggiungi la class quindi rimuovi quando si desidera ritriggersre lo scorrimento, testato in IE, FF, Safari e Chrome.

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

Per i dispositivi mobili , dovrai gestire l’evento touchmove :

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

E separare per ritriggersre lo scorrimento. Testato su iOS6 e Android 2.3.3

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

Ecco un modo molto semplice per farlo:

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

È un po ‘nervoso in IE6.

Questa soluzione manterrà la posizione di scorrimento corrente mentre lo scorrimento è disabilitato, a differenza di alcuni che riportano l’utente in alto.

Si basa sulla risposta di galambalazs , ma con il supporto per i dispositivi touch, e refactored come un singolo object con wrapper di jQuery.

Demo qui.

Su github qui

 /** * $.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, // eg .disablescroll('undo'); else if(instance && instance[method]) { instance[method].call(instance); } }; // Global access window.UserScrollDisabler = UserScrollDisabler; })(jQuery); 

La seguente soluzione è semplice ma pura JavaScript (senza jQuery):

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

Mi dispiace rispondere a un vecchio post ma stavo cercando una soluzione e ho trovato questa domanda.

Esistono molte soluzioni alternative per questo problema per visualizzare ancora la barra di scorrimento, ad esempio dare al contenitore un’altezza del 100% e un overflow-y: scroll stile.

Nel mio caso ho appena creato un div con una barra di scorrimento che visualizzo aggiungendo un overflow: hidden al corpo:

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

La barra di scorrimento dell’elemento deve avere questo stile:

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

Questo mostra una barra di scorrimento grigia, spero che aiuti i futuri visitatori.

Secondo il post di Galambalazs aggiungerei il supporto per i dispositivi touch, permettendoci di toccare ma non scorrere verso l’alto o verso il basso:

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

Stavo cercando una soluzione a questo problema, ma non ero soddisfatto di nessuna delle soluzioni di cui sopra (al momento di scrivere questa risposta ), quindi mi è venuta in mente questa soluzione ..

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

Un’altra soluzione:

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

In questo modo hai sempre una barra di scorrimento verticale, ma poiché la maggior parte dei miei contenuti è più lunga della finestra, questo è ok per me. Il contenuto è centrato con un div separato, ma senza il margine di impostazione di nuovo nel corpo il mio contenuto rimarrebbe a sinistra.

Queste sono le due funzioni che uso per mostrare il mio popup / modale:

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

Risultato: sfondo non scorrevole e nessun riposizionamento del contenuto a causa della barra di scorrimento sinistra. Testato con FF, Chrome e IE 10 attuali.

Cosa ne pensi di questo? (Se stai usando jQuery)

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

A seconda di ciò che si desidera ottenere con lo scroll rimosso, è ansible correggere l’elemento da rimuovere (dal clic o da qualsiasi altro trigger che si desidera distriggersre temporaneamente scroll)

Stavo cercando una soluzione “temp no scroll” e per i miei bisogni, questo l’ha risolto

fare una lezione

 .fixed{ position: fixed; } 

poi con 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'); }; }); 

Ho scoperto che si trattava di una soluzione abbastanza semplice che funziona bene su tutti i browser e che rende anche semplice l’uso su dispositivi portatili (ad esempio iPhone, tablet, ecc.). Poiché l’elemento è temporaneamente risolto, non c’è scorrimento 🙂

NOTA! A seconda del posizionamento del tuo elemento “contentContainer” potrebbe essere necessario regolarlo da sinistra. Che può essere fatto facilmente aggiungendo un valore sinistro css a quell’elemento quando la class fissa è triggers

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

Sto usando showModalDialog , per mostrare la pagina secondaria come finestra di dialogo modale.

per hide le barre di scorrimento della finestra principale:

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

e alla chiusura della finestra di dialogo modale, mostrando le barre di scorrimento della finestra principale:

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

per accedere agli elementi nella finestra principale dalla finestra di dialogo:

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

solo per chi cerca su showModalDialog : (dopo la riga 29 del codice originale)

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

Annullare l’evento come nella risposta accettata è un metodo orribile secondo me: /

Invece ho usato la position: fixed; top: -scrollTop(); position: fixed; top: -scrollTop(); sotto.

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

Dal mio progetto popup jQuery: https://github.com/seahorsepip/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": ""}); } } 

Questo codice prende in considerazione, larghezza, altezza, scrollbar e problemi di pagejump.

Possibili problemi risolti con il codice precedente:

  • larghezza, quando si imposta la posizione fissa, la larghezza dell’elemento html può essere inferiore al 100%
  • altezza, come sopra
  • barra di scorrimento, quando si imposta la posizione fissa il contenuto della pagina non ha più una barra di scorrimento anche quando aveva una barra di scorrimento prima di provocare un salto pagina orizzontale
  • pagejump, quando si imposta la posizione fissa, la pagina scrollTop non è più efficace con conseguente salto di pagina verticale

Se qualcuno ha dei miglioramenti al codice di blocco / sblocco della pagina precedente fammelo sapere, così posso aggiungere questi miglioramenti al mio progetto.

A partire da Chrome 56 e altri browser moderni, devi aggiungere passive:false alla chiamata addEventListener per rendere preventDefault . Quindi lo uso per smettere di scorrere sul cellulare:

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

Basandosi sulla risposta di Cheyenne Forbes, e una che ho trovato qui via fcalderan: basta disabilitare scroll per non nasconderlo? e per risolvere il problema di Hallodom della scrollbar scomparendo

CSS:

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

JS:

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

Questo codice ti porta in cima alla pagina, ma penso che il codice di fcalderan abbia una soluzione.

So che questa è una vecchia domanda, ma dovevo fare qualcosa di molto simile, e dopo un po ‘di tempo cercando una risposta e provando approcci diversi, ho finito per usare una soluzione molto semplice.

Il mio problema era molto simile, quasi identico, l’unica differenza è che non dovevo mostrare effettivamente la barra di scorrimento – dovevo solo assicurarmi che la sua larghezza fosse ancora usata, quindi la larghezza della pagina non sarebbe cambiata mentre il mio overlay era visualizzato .

Quando comincio a far scorrere il mio overlay sullo schermo, faccio:

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

e dopo aver fatto scorrere la mia sovrapposizione dallo schermo che faccio:

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

IMPORTANTE: funziona perfettamente perché il mio overlay è posizionato in modo absolute , a right: 0px se visible .

Ho lo stesso problema, di seguito è il modo in cui lo gestisco.

 /* 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; } 

spero che questo aiuto.

Il metodo più semplice è:

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

Per annullarlo:

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

Facile da implementare, ma l’unico svantaggio è:

  • La pagina salterà un po ‘a sinistra se è allineata al centro (in orizzontale).

Ciò è dovuto al fatto che la barra di scorrimento viene rimossa e che il viewport diventa un po ‘più ampio.

Ecco la mia soluzione per fermare lo scroll (no jQuery). Lo uso per disabilitare lo scroll quando appare il menu laterale.

     

Ho trovato questa risposta su un altro sito :

Disabilita scorrimento:

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

Dopo la chiusura ravvicinata del popup, scorrere:

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

La soluzione di Galambalaz è fantastica! Ha funzionato perfettamente per me sia in Chrome che in Firefox. E può anche essere esteso per impedire qualsiasi evento predefinito dalla finestra del browser. Diciamo che stai facendo un’app sulla canvas. Potresti fare questo:

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

E poi sulla tua app diciamo che elaborerai i tuoi eventi, come mouse, tastiera, eventi touch e così via … Puoi distriggersre gli eventi predefiniti quando il mouse entra nella canvas e ritriggersrli quando il mouse esce:

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

Puoi anche disabilitare il menu del tasto destro con questo trucco:

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

Ho avuto un problema di animazione simile sugli schermi mobili ma non sui portatili, quando provavo ad animare un div usando il comando animato di jquery. Così ho deciso di usare un timer che ripristina la posizione di scorrimento della finestra così frequentemente che ad occhio nudo il documento sembrerebbe statico. Questa soluzione ha funzionato perfettamente su un dispositivo mobile di piccole dimensioni come Samsung Galaxy-2 o iphone-5.

Logica principale di questo approccio : il timer per impostare la posizione di scorrimento della finestra sulla posizione di scorrimento originale deve essere avviato prima del comando jquery animate e, al termine dell’animazione, è necessario cancellare questo timer (la original scroll position è la posizione appena prima dell’inizio dell’animazione) .

Ho scoperto con mia grande sorpresa che il documento è apparso statico durante la durata dell’animazione se l’intervallo del timer era di 1 millisecond , che è quello a cui miravo.

 //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); }); 

UN’ALTRA SOLUZIONE che ha funzionato : Sulla base della risposta di Mohammad Anini in questo post per abilitare / disabilitare lo scorrimento, ho anche scoperto che una versione modificata del codice come sotto funzionava.

 //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() {}; }); 

Una soluzione semplice che ha funzionato per me (disabilitando temporaneamente lo scorrimento della finestra).

Basato su questo violino: http://jsfiddle.net/dh834zgw/1/

il seguente snippet (usando jquery) disabiliterà lo scroll della finestra:

  var curScrollTop = $(window).scrollTop(); $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px'); 

E nel tuo css:

 html.noscroll{ position: fixed; width: 100%; top:0; left: 0; height: 100%; overflow-y: scroll !important; z-index: 10; } 

Ora quando rimuovi la modale, non dimenticare di rimuovere la class noscroll sul tag html:

 $('html').toggleClass('noscroll'); 

Qualcosa che ho appena messo insieme:

jsfiddle

 document.onwheel = function(e) { // get the target element target = e.target; // the target element might be the children of the scrollable element // eg, "li"s inside an "ul", "p"s inside a "div" etc. // we need to get the parent element and check if it is scrollable // if the parent isn't scrollable, we move up to the next parent while (target.scrollHeight <= target.clientHeight) { // while looping parents, we'll eventually reach document.body // since body doesn't have a parent, we need to exit the while loop if (target == document.body) { break; } target = target.parentElement; } // we want this behaviour on elements other than the body if (target != document.body) { // if the scrollbar is at the top and yet if it still tries to scroll up // we prevent the scrolling if (target.scrollTop <= 0 && e.deltaY < 0) { e.preventDefault(); } // similarly, if the scrollbar is at the bottom and it still tries to scroll down // we prevent it else if (target.clientHeight + target.scrollTop >= target.scrollHeight && e.deltaY > 0) { e.preventDefault(); } } }; 
 body { background: gainsboro; } #box { width: 300px; height: 600px; padding: 5px; border: 1px solid silver; margin: 50px auto; background: white; overflow: auto; } 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Puoi bloccare lo scroll della barra spaziatrice e hide la barra di scorrimento del browser:

 $(document).keydown(function(event) { if (event.keyCode == 32) { return false; } }); document.documentElement.style.overflow = 'hidden'; document.body.scroll = 'no'; 

La mia opinione su questo argomento include anche una preoccupazione per la larghezza del corpo, dato che la pagina sembra danzare un po ‘quando nascondiamo la barra di scorrimento con overflow = "hidden" . Il seguente codice funziona perfettamente per me e si basa su un approccio angular.

 element.bind('mouseenter', function() { var w = document.body.offsetWidth; document.body.style.overflow = 'hidden'; document.body.style.width = w + 'px'; }); element.bind('mouseleave', function() { document.body.style.overflow = 'initial'; document.body.style.width = 'auto'; }); 

Ho un problema simile sui dispositivi touch. L’aggiunta di “touch-action: none” all’elemento ha risolto il problema.

Per maggiori informazioni. Controllalo:-

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Ho trovato un modo migliore, ma buggy, che combina l’idea di sdleihssirhc:

 window.onscroll = function() { window.scrollTo(window.scrollX, window.scrollY); //Or //window.scroll(window.scrollX, window.scrollY); //Or Fallback //window.scrollX=window.scrollX; //window.scrollY=window.scrollY; }; 

I didn’t test it, but I’ll edit later and let you all know. I’m 85% sure it works on major browsers.

Enabling the following CSS with JavaScript will help. I’m not as good as the others here but this worked for me.

 body { position: fixed; overflow-y: scroll; }