Comment désactiver temporairement le défilement?

annuler l'événement comme dans la réponse acceptée est une méthode horrible à mon avis: /

à la place j'ai utilisé position: fixed; top: -scrollTop(); ci-dessous.

Démo: https://jsfiddle.net/w9w9hthy/5/

de mon projet jQuery popup: 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": ""});
    }
}

ce code prend, largeur, hauteur, scrollbar et pagejump questions en considération.

problèmes possibles résolus avec le code ci-dessus:

• largeur, lorsque la position est fixe la largeur de l'élément html peut être plus petite que 100%
• hauteur, même que ci-dessus
• scrollbar, lors du réglage de la position fixé le contenu de la page n'a plus de scrollbar même quand il avait une barre de défilement avant d'aboutir à un saut de page horizontal
• pagejump, lors du réglage position fixe la page scrollTop n'est plus efficace résultant en un saut de page vertical

si quelqu'un a des améliorations à la page ci-dessus, faites-moi savoir pour que je puisse ajouter ces améliorations à mon projet.

à partir de Chrome 56 et d'autres navigateurs modernes, vous devez ajouter passive:false à la addEventListener appel à faire preventDefault travail. Donc je l'utilise pour arrêter de défiler sur mobile:

function preventDefault(e){
    e.preventDefault();
}

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

basé sur la réponse de Cheyenne Forbes, et celui que j'ai trouvé ici via fcalderan: juste désactiver scroll pas le cacher? et pour régler la question de Hallodom de la disparition du scrollbar

CSS:

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

JS:

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

ce code vous amène en haut de la page, mais je pense que le code de fcalderan a une solution.

je sais que c'est une vieille question, mais j'ai dû faire quelque chose de très similaire, et après un certain temps à la recherche d'une réponse et en essayant différentes approches, j'ai fini par utiliser une solution très facile.

mon problème était très similaire, presque identique, la seule différence est que je n'avais pas à afficher la barre de défilement - je devais juste m'assurer que sa largeur serait encore utilisée, de sorte que la largeur de la page ne changerait pas pendant que ma superposition était affichée.

Quand je commence à glisser ma superposition dans l'écran, je fais:

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

et après avoir fait glisser ma superposition de l'écran je fais:

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

IMPORTANT: cela fonctionne parfaitement parce que ma superposition est positionnée absolute , right: 0px quand visible .

j'ai le même problème, voici la façon dont je le manipuler.

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

espérons que cette aide.

la méthode la plus simple est:

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

Pour le défaire:

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

facile à mettre en œuvre, mais le seul inconvénient est:

• la page sautera un peu à gauche si elle est alignée au centre (horizontalement).

ceci est dû au fait que la barre de défilement a été supprimée, et que le viewport est devenu un peu plus large.

voici ma solution pour arrêter le rouleau (no jQuery). - Je l'utiliser pour désactiver le défilement lorsque le menu s'affiche.

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

j'ai mis 17px de rembourrage-droit pour compenser la disparition de la barre de rouleau. Mais c'est aussi problématique, surtout pour les navigateurs mobiles. Résolu en obtenant la largeur de la barre selon ce .

tous ensemble dans ce stylo.

j'ai trouvé cette réponse sur un autre site :

Désactiver le défilement:

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

après le rouleau popup de fermeture:

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

la solution de galambalazs est géniale! Cela a fonctionné parfaitement pour moi dans les deux Chrome et Firefox. Et il peut également être étendu pour prévenir tout événement par défaut à partir de la fenêtre du navigateur. Disons que vous faites une application sur la toile. Vous pourriez faire ceci:

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

Et ensuite sur votre application disons que vous allez traiter vos propres événements, comme la souris, le clavier, la touche et les évènements... Vous pouvez désactiver les événements par défaut lorsque la souris va à l'intérieur de la toile et re-enable quand la souris sort:

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

vous pourriez même désactiver le menu de clic droit avec ce hack:

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

j'ai eu un problème d'animation similaire sur les écrans mobiles mais pas sur les ordinateurs portables, en essayant d'animer une div en utilisant la commande animate de jquery. J'ai donc décidé d'utiliser une minuterie qui restaurait la position de défilement de la fenêtre si souvent qu'à l'oeil nu le document paraîtrait statique. Cette solution fonctionnait parfaitement sur un petit écran mobile comme Samsung Galaxy-2 ou iphone-5.

Logique principale de cette approche : la minuterie la position de défilement à la position de défilement originale doit être commencée avant la commande jQuery animate, et ensuite lorsque l'animation est terminée, nous devons effacer cette minuterie ( original scroll position est la position juste avant le début de l'animation).

j'ai trouvé à mon agréable surprise que le document apparaissait en fait statique pendant la durée de l'animation si l'intervalle de minuterie était 1 millisecond , ce qui est ce que je visais.

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

une autre SOLUTION qui a fonctionné : sur la base de la réponse de Mohammad Anini sous ce post pour activer/désactiver le défilement, j'ai également constaté qu'une version modifiée du code comme ci-dessous travaillé.

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

une solution simple qui a fonctionné pour moi (désactivant temporairement le défilement de la fenêtre).

basé sur ce violon: http://jsfiddle.net/dh834zgw/1 /

le fragment suivant (en utilisant jquery) désactivera le rouleau de la fenêtre:

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

et dans votre css:

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

Maintenant, lorsque vous supprimez le modal, n'oubliez pas de supprimer la classe noscroll sur la balise html:

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

quelque Chose que je viens de mettre ensemble:

jsfiddle

document.onwheel = function(e) {
  // get the target element
  target = e.target;
  // the target element might be the children of the scrollable element
  // e.g., "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;
}

<div id="box">
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
</div>

vous pouvez bloquer la barre d'espacement et cacher la barre de défilement du navigateur:

$(document).keydown(function(event) {
    if (event.keyCode == 32) {
        return false;

    }
});

document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';

mon point de vue sur cette question inclut également une préoccupation avec la largeur du corps, car la page semble danser un peu quand nous cachons la barre de défilement avec overflow = "hidden" . Le code suivant fonctionne parfaitement pour moi, et est basé sur une approche angulaire.

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

j'ai un problème similaire sur les appareils tactiles. L'ajout de" touch-action: none " à l'élément a résolu le problème.

pour plus d'information. Regardez ça: -

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

C'est la solution la plus simple que j'ai eu jusqu'à présent. Et croyez-moi j'ai essayé tous les autres, et c'est le plus facile. Il fonctionne grand sur les appareils Windows , qui pousse la page de la droite d'avoir de la place pour le scrollbar système et iOS appareils qui ne nécessitent pas d'espace pour leurs barres de défilement dans les navigateurs. Donc, en utilisant ceci, vous n'aurez pas besoin d'ajouter du rembourrage sur la droite pour que la page ne clignote pas lorsque vous masquer le débordement de le corps ou html avec css .

la solution est assez simple si vous y pensez. L'idée est de donner la fenêtre .scrollTop () la même position exacte au moment où un popup est ouvert. Changez également cette position lorsque la fenêtre redimensionne ( comme la position de défilement change une fois que cela se produit ).

alors on y va...

permet D'abord de créer la variable qui vous fera savoir que le popup est ouvert et l'appeler stopWindowScroll . Si nous ne le faisons pas, alors vous obtiendrez une erreur d'une variable non définie sur votre page et la définirez à 0 - comme non active.

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

permet maintenant de faire la fonction popup ouvrir sorcière peut être n'importe quelle fonction dans votre code qui déclenche quelque popup que vous utilisez comme un plugin ou personnalisé. Dans ce cas, ce sera un popup personnalisé simple avec un document simple sur la fonction de clic.

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

Donc la prochaine chose que nous faisons est de créer la fonction de popup close, que je répète encore une fois peut être n'importe quelle fonction que vous avez déjà créé ou utilisez dans un plugin. La chose importante est que nous avons besoin de ces 2 fonctions pour définir la variable stopWindowScroll à 1 ou 0 pour savoir quand elle est ouverte ou fermée.

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

permet alors de créer la fenêtre.fonction de défilement afin que nous puissions empêcher le défilement une fois le stopWindowScroll mentionné ci-dessus est réglé sur 1 active.

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

C'est ça. Aucun CSS requis pour cela de travailler, sauf vos propres styles pour la page. Cela a fonctionné comme un charme pour moi et j'espère qu'il vous aide et d'autres.

voici un exemple de travail sur JSFiddle:

js Fiddle Example

dites-moi si cela a aidé. Égard.

j'ai trouvé une meilleure façon, mais buggy, combinant l'idée de sdleihssirrhc:

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

Je ne l'ai pas testé, mais je vous le ferai savoir plus tard. Je suis sûr à 85% que ça marche sur les principaux navigateurs.

activer le CSS suivant avec JavaScript aidera. Je ne suis pas aussi bon que les autres, mais ça a marché pour moi.

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