Empêcher le corps de défiler (mobile, navigateur natif)

Sur le navigateur natif de Samsung Galaxy S5 / S6, pièce suivante de CSS:

body { overflow: hidden; } 

N'arrête pas le corps de défiler.

  • GridLayout et Row / Column Span Ain
  • Comment afficher / déboguer les en-têtes de requêtes non standard que le navigateur de mon téléphone envoie?
  • Où puis-je trouver de la documentation pour BlueZ?
  • Android: Location.distancePour ne pas fonctionner correctement?
  • Le moniteur de mémoire dans Android Studio rapporte une utilisation de RAM différente de celle du périphérique
  • Erreur étrange utilisant onCreateView dans PreferenceFragment lorsque vous appelez addPreferencesFromResource à partir de onCreate
  • Y a-t-il une solution à ces problèmes?

    Modifier: comme indiqué ci-dessous, cela peut se faire en ajoutant un débordement: caché à la balise html. Mais cela introduit un problème où la fenêtre se déplace vers le haut.

    Est-il possible d'empêcher le corps de défiler sans l'effet secondaire du rouleau (page défilement vers le haut, une fois que html, le corps se débordement: caché)?

    Note latérale: le problème est reproductible dans les environnements suivants:

     Samsung Galaxy S5 (Android 5.0) Browser: Native; Samsung Galaxy S6 (Android 6.0.1) Browser: Native; iPhone 5S (iOS 8.4.1) Browsers: Chrome; Safari; iPhone 6+ (iOS 9.3.2) Browsers: Chrome; Safari; 

  • Se connecter par programme à un périphérique Bluetooth apparié
  • Comment ajouter de l'espace entre les éléments dans Android Listview?
  • Modifier la liste des préférences Résumé de la couleur et de la taille du texte
  • PhoneGap + Google Maps API v3: ne s'affiche pas (du tout) sur Android
  • Affichage de gif dans Android
  • Comment désactiver tous les événements de clics d'une mise en page?
  • 6 Solutions collect form web for “Empêcher le corps de défiler (mobile, navigateur natif)”

    Essayez d'ajouter une margin:0px !important sur l'élément du corps

    Css + solution Javascript:

    Classe css pour désactiver le défilement

     .lock-scroll{ position: fixed; width: 100%; height: 100%; } 

    Code javascript pour corriger le sauts scrollTop après l'application de la classe css:

     function disableScroll(elem){ var lastScrollTop = $(elem).scrollTop(); $(elem).addClass("lock-scroll"); $(elem).css("top", "-" + lastScrollTop + "px"); } function enableScroll(elem){ var lastScrollTop = Number($('#wmd-input-39380954').css("top").match(/[0-9]/g).join("")); $(elem).removeClass("lock-scroll"); $(elem).css("top", "0px"); $(elem).scrollTop(lastScrollTop); } 

    Désactiver le défilement par l'élément cible

    Index.html:

     <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <style> body{ background-color:#333333; color: white; } #modalView{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.6); overflow: scroll; } #modalViewScroll{ width: 300px; height: 200px; overflow: scroll; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background: white; color: red; } </style> </head> <body> BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/> <div id="modalView"> <div id="modalViewScroll"> MODAALLLL SCROLL 1<br/>__________________<br/>MODAALLLL SCROLL 2<br/>__________________<br/>MODAALLLL SCROLL 3<br/>__________________<br/>MODAALLLL SCROLL 4<br/>__________________<br/>MODAALLLL SCROLL 5<br/>__________________<br/>MODAALLLL SCROLL 6<br/>__________________<br/>MODAALLLL SCROLL 7<br/>__________________<br/>MODAALLLL SCROLL 8<br/>__________________<br/>MODAALLLL SCROLL 9<br/>__________________<br/>MODAALLLL SCROLL 1<br/>__________________<br/>MODAALLLL SCROLL 2<br/>__________________<br/>MODAALLLL SCROLL 3<br/>__________________<br/> </div> </div> <script type="text/javascript"> function scrollDisabled(e){ // Two option : // // 1) scroll anywhere will scroll the modal but you have to handle scroll state, and disable scroll with close modal // // if(scrollingModal){ // $('#modalViewScroll').scrollTop($('#modalViewScroll').scrollTop() + e.deltaY); // return true; // } // 2) scroll only above the modal if (e.target.id == "modalViewScroll") { $('#modalViewScroll').scrollTop($('#modalViewScroll').scrollTop() + e.deltaY); return true; } } function preventDefaultForScrollKeys(e) { if(scrollDisabled(e)){ var keys = {37: 1, 38: 1, 39: 1, 40: 1}; if (keys[e.keyCode]) { preventDefault(e); return false; } } } function preventDefault(e) { if(scrollDisabled(e)){ e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } } function hookScroll() { 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; } hookScroll(); </script> </body> </html> 

    Pour éviter de faire défiler vers le haut avec des feux d'événement de clic

    Vous devez ajouter le return false; Après l'événement de clic;

    Exemple:

     <button onclick="openModal(); return false;">Open Modal</button> 

    Pour désactiver le défilement dans les navigateurs mobiles

    Vous devez définir le overflow:hidden également pour la <html> .

    Exemple:

     <html> <head> <style> html,body{overflow:hidden} </style> </head> <body> // You html body </body> </html> 

    Je pense que vous pouvez simplement faire avec cette boostrap modal pop up , simplement copier coller avec ceci à une page html

     body { width:100%; height:1000px; float:left; margin:0; } 
     <!doctype html> <html> <head> <meta charset="utf-8"> <title>disable body scroll</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html> 

    essayer

     body { overflow:hidden; position:fixed; top:0; bottom: 0; } 

    Je crois que l'astuce consiste à rendre la position BODY relative afin qu'elle ne se déplace pas vers le haut lorsque vous la configurez:

     BODY { width:100%; height:100%; overflow:hidden; position:relative; } 

    Si vous utilisez jQuery:

     $('body').css('overflow', 'hidden'); $('*').not('body').css('overflow', 'auto'); 

    ou:

     $('body').css('overflow', 'hidden'); $('body').children().css('overflow', 'auto'); 
    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.