Comment désactiver les barres de défilement. Comment supprimer les barres de défilement

J'utilise le plugin scrollTo jQuery et j'aimerais savoir s'il existe un moyen de désactiver temporairement le défilement d'un élément de fenêtre via Javascript ? La raison pour laquelle je voudrais désactiver le défilement est que lors du défilement pendant l'animation scrollTo, cela devient vraiment moche ;)

bien sûr, je pourrais faire $("body").css("overflow", "hidden"); puis remettez-le en mode automatique lorsque l'animation s'arrête, mais il serait préférable que la barre de défilement soit toujours visible mais inactive.

* À utiliser pendant que jQuery anime la position de défilement pour une conduite ultra fluide garantie !

//Geler la fonction de défilement du contenu de la page 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 )); ) ) //Dégeler la fonction de défilement du contenu de la page unfreeze() ( if($("html").css("position") == "fixed") ( $("html").css("position" , "statique"); $("html, corps").scrollTop(-parseInt($("html").css("top"))); $("html").css(("position": "", "width": "", "height": "", "top": "", "overflow-y": ""));

ce code prend en compte les problèmes de largeur, de hauteur, de barre de défilement et de saut de page.

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

• width, lors de la définition d'une position fixe, la largeur de l'élément html peut être inférieure à 100 %
• hauteur, comme ci-dessus
• barre de défilement, en définissant la position sur fixe, le contenu de la page n'a plus de barre de défilement, même s'il en avait une avant de provoquer un saut de page horizontal
• pagejump, lors de la définition d'une position fixe, le scrollTop de la page n'est plus efficace, ce qui entraîne un saut de page vertical

Si quelqu'un a des améliorations au code de gel/dégel de la page ci-dessus, veuillez me le faire savoir afin que je puisse ajouter ces améliorations à mon projet.

désactiver le défilement :

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

après avoir fermé la fenêtre contextuelle de défilement de version :

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

fragment suivant (avec utiliser jquery) désactivera le défilement de la fenêtre :

Var curScrollTop = $(window).scrollTop();

$("html").toggleClass("noscroll").css("top", "-" + curScrollTop + "px");

et dans ton css :

Html.noscroll( position : fixe ; largeur : 100 % ; haut : 0 ; gauche : 0 ; hauteur : 100 % ; débordement-y : défilement !important ; z-index : 10 ; ) Maintenant, lorsque vous supprimez le modal, n'oubliez pas de supprimer la classe noscroll dans:

balise html

Document.onwheel = function(e) ( // récupère l'élément cible target = e.target; // l'élément cible peut être les enfants de l'élément déroulant // par exemple, "li" est à l'intérieur d'un "ul", "p "s à l'intérieur d'un "div" etc. // nous devons obtenir l'élément parent et vérifier s'il peut défiler // si le parent ne peut pas défiler, nous passons au parent suivant while (target.scrollHeight 0) ( e .preventDefault(); ) ); corps ( arrière-plan : gainsboro ; ) #box ( largeur : 300 px ; hauteur : 600 px ; remplissage : 5 px ; bordure : 1 px en argent massif ; marge : 50 px auto ; arrière-plan : blanc ; débordement : 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.

C'est la solution la plus simple que j'ai trouvée jusqu'à présent. Et croyez-moi, j'ai essayé tous les autres et celui-ci est le plus simple. Cela fonctionne très bien pour Appareils Windows qui pousse la page vers la droite pour laisser de la place à la barre de défilement du système et Appareils iOS qui ne nécessitent pas d'espace pour leurs barres de défilement dans les navigateurs. Ainsi, en utilisant cela, vous n'avez pas besoin d'ajouter un remplissage à droite pour que la page ne scintille pas lorsque vous masquez le corps ou le débordement HTML en utilisant CSS.

La solution est assez simple si vous y réfléchissez. L'idée est de donner

J'ai trouvé une méthode meilleure mais boguée en combinant l'idée de sdleihssirhc :

Window.onscroll = function() ( window.scrollTo(window.scrollX, window.scrollY); //Ou //window.scroll(window.scrollX, window.scrollY); //Ou Fallback //window.scrollX=window .scrollX; //window.scrollY=window.scrollY);

Je ne l'ai pas testé, mais je le modifierai plus tard et je vous le ferai savoir. Je suis sûr à 85 % que cela fonctionne dans les principaux navigateurs.

Dans cet article, vous apprendrez comment désactiver ou activer les barres de défilement masquées automatiquement dans les applications universelles (UWP) pour votre compte sous Windows 10

Dans le système d'exploitation, à partir de 1803, les développeurs ont ajouté une option qui permet de désactiver le masquage automatique des barres de défilement et sera utile principalement pour les utilisateurs qui préfèrent que les barres de défilement restent toujours visibles dans les applications UWP (XAML) et dans

Défaut système opérateur Masque les barres de défilement lorsque le pointeur de la souris ne les survole pas. La désactivation de ce paramètre fait apparaître les barres de défilement dans les applications UWP (XAML) et le menu Démarrer sous forme de barres de défilement dans leur taille entièrement développée, même lorsque vous n'interagissez pas avec elles.

Comment désactiver le masquage automatique des barres de défilement dans une application " Paramètres Windows»

Pour désactiver les barres de défilement masquées automatiquement, cliquez sur le bouton Démarrer de la barre des tâches, puis sélectionnez ou appuyez sur + I.

Dans la fenêtre de l'application Paramètres Windows qui s'ouvre, sélectionnez la catégorie Accessibilité

Sélectionnez ensuite l'onglet Affichage, et sur le côté droit de la fenêtre, dans la section Simplification et Personnalisation de Windows, réglez le commutateur sur Off.

Les barres de défilement apparaîtront désormais toujours dans les applications universelles (UWP) ainsi que dans le menu Démarrer, même si vous n'interagissez pas avec elles.

Vous pouvez annuler les modifications en réglant le commutateur Masquer automatiquement les barres de défilement dans Windows sur Activé.

Comment désactiver les barres de défilement masquées automatiquement dans l'Éditeur du Registre

Vous pouvez également désactiver le masquage automatique des barres de défilement à l'aide de l'éditeur de registre. Mais avant d’apporter des modifications au registre, il est recommandé soit d’exporter directement la section du registre dans laquelle les modifications seront apportées.

Ouvrez l'éditeur de registre en appuyant sur la combinaison de touches + R et dans la fenêtre qui s'ouvre, saisissez regedit et cliquez sur Touche Entrée↵ ou utilisez la recherche Windows.

Dans la fenêtre de l'Éditeur du Registre qui s'ouvre, accédez au chemin suivant :

Ensuite, cliquez sur clic droit souris sur la section Accessibilité ou cliquez avec le bouton droit sur la zone vide à droite de la fenêtre et menu contextuel Sélectionnez Nouveau > Valeur DWORD (32 bits). Nommez le paramètre créé DynamicScrollbars

Double-cliquez ensuite sur le paramètre DynamicScrollbars créé et définissez sa valeur sur 0 et cliquez sur OK

Les modifications prennent effet immédiatement.

Pour activer le masquage automatique des barres de défilement, définissez DynamicScrollbars sur 1
  De plus, pour désactiver les barres de défilement masquées automatiquement, vous pouvez procéder comme suit :

"DynamicScrollbars"=dword:00000000

Éditeur de registre Windows version 5.00

"DynamicScrollbars"=dword:00000001

Après avoir appliqué les fichiers de registre, vous devez vous déconnecter et vous reconnecter pour que les modifications prennent effet.

Comment désactiver le défilement ?

Réponse du Maître :

Le défilement est nécessaire lorsque vous devez vous déplacer dans un document ou un site Web, et leur taille ne limite pas la taille de l'écran. Il existe un défilement vertical et horizontal. Si le défilement est désactivé, la visualisation complète des ressources deviendra impossible.

Le défilement est un paramètre configurable. Les paramètres de base peuvent être définis à l'aide de la « Souris » et ils s'appliqueront à toutes les applications, et la méthode de défilement peut être définie et annulée à l'aide du navigateur. Ces paramètres fonctionneront lorsque vous naviguerez sur Internet.

Pour désactiver le défilement fluide lors de la navigation sur les ressources Internet, lancez le navigateur et sélectionnez la section « Paramètres » dans le menu « Outils ». Pour Internet Explorer ce sera le menu Outils et la section Options Internet. Si le menu ne s'affiche pas, cliquez sur le panneau supérieur ou inférieur de la fenêtre du navigateur et marquez le sous-élément « Barre de menu » ou « Barre de menu » dans le menu avec un marqueur.

Après avoir ouvert la fenêtre « Paramètres », accédez à l'onglet « Avancé » et activez la sous-section « Général ». Recherchez le groupe « Visualisation du site » et décochez la case « Utiliser le défilement fluide », puis cliquez sur le bouton « OK ».

Pour désactiver le défilement automatique, décochez la case « Utiliser le défilement automatique ». Pour Internet Explorer, la méthode sera légèrement différente : vous devez vous déplacer dans la liste des paramètres disponibles, à l'aide de la barre de défilement, jusqu'à ce que les éléments nécessaires soient trouvés.

Afin de configurer les paramètres généraux de défilement, on se tourne vers le composant « Souris », que l'on appelle « Panneau de configuration » (depuis le menu « Démarrer »). Allons dans la catégorie « Imprimantes et autres équipements » et cliquons sur l'icône « Souris ».

La fenêtre « Propriétés : Souris » s'ouvrira, après quoi vous devrez vous rendre dans l'onglet « Roue » et configurer le défilement selon vos besoins. Le marqueur défini dans le champ « Écran » déplacera l'image sur le moniteur à une distance égale à la hauteur de l'écran.

Si ce paramètre est trop grand pour nous, nous pouvons définir un marqueur dans le champ « Pour le nombre de lignes spécifié » et saisir la valeur requise à l'aide du clavier ou des touches fléchées. La valeur « 0 » ne peut pas être définie. Appliquez les modifications apportées et fermez la fenêtre.

J'utilise le plugin scrollTo jQuery et j'aimerais savoir s'il est possible de désactiver temporairement le défilement d'un élément de fenêtre via Javascript ? La raison pour laquelle je voudrais désactiver le défilement est que lorsque vous faites défiler, lorsque la fonction scrollTo s'anime, cela devient vraiment moche ;)

Bien sûr, je pourrais faire $("body").css("overflow", "hidden"); puis remettez-le en mode automatique lorsque l'animation s'arrête, mais il serait préférable que la barre de défilement soit toujours visible mais inactive.

L'événement de défilement ne peut pas être annulé. Mais cela peut être fait en annulant les événements d'interaction suivants :
Boutons associés au défilement souris et tactile et au défilement.

Pour ce faire, ajoutez simplement une classe au corps :

Arrêter le défilement (hauteur : 100 % ; débordement : caché ; )

Ajoutez une classe et supprimez-la si vous souhaitez réactiver le défilement, testé dans IE, FF, Safari et Chrome.

$("body").addClass("arrêter le défilement")

Pour appareils mobiles vous devez gérer l'événement touchmove :

$("body").bind("touchmove", function(e)(e.preventDefault()))

Et désépinglez pour activer à nouveau le défilement. Testé sous iOS6 et Android 2.3.3

$("corps").unbind("touchmove")

Solution suivante est du JavaScript basique mais pur (pas de jQuery) :

Fonction DisableScrolling())( var x=window.scrollX; var y=window.scrollY; window.onscroll=function())(window.scrollTo(x, y);); ) fonction activateScrolling())( window.onscroll =fonction( )();

Je suis désolé de répondre à un ancien message, mais je cherchais une solution et je suis tombé sur cette question.

Il existe de nombreuses façons de résoudre ce problème pour toujours afficher la barre de défilement, par exemple en donnant au conteneur une hauteur de 100 % et un style overflow-y: scroll.

Dans mon cas, je viens de créer un div avec une barre de défilement, que j'affiche en ajoutant overflow: caché au corps :

Fonction DisableScroll() ( document.getElementById("scrollbar").style.display = "block"; document.body.style.overflow = "hidden"; )

La barre de défilement de l'élément doit avoir les styles suivants :

Overflow-y : défilement ; haut : 0 ; à droite : 0 ; affichage : aucun ; hauteur : 100 % ; poste : fixe ;

La barre de défilement grise est affichée ici, j'espère qu'elle aidera les futurs visiteurs.

D'après le message de galambalazs, j'ajouterais la prise en charge des appareils tactiles, nous permettant de toucher mais pas de faire défiler vers le haut ou vers le bas :

Fonction Disable_scroll() ( ... document.ontouchmove = function(e)( e.preventDefault(); ) ) Function Enable_scroll() ( ... document.ontouchmove = function(e)( return true; ) )

Je cherchais une solution à ce problème, mais je n'étais satisfait d'aucune des solutions ci-dessus (au moment de la rédaction de cette réponse), j'ai donc trouvé cette solution.

ScrollDisabled ( position : fixe ; margin-top : 0 ; // remplacement par JS pour utiliser acc pour curr $(window).scrollTop() width : 100% ; )

Var y_offsetWhenScrollDisabled=0; fonction DisableScrollOnBody())( y_offsetWhenScrollDisabled= $(window).scrollTop(); $("body").addClass("scrollDisabled").css("margin-top", -y_offsetWhenScrollDisabled); ) fonction activateScrollOnBody())( $( "body").removeClass("scrollDisabled").css("margin-top", 0 $(window).scrollTop(y_offsetWhenScrollDisabled)

Autre solution :

De cette façon, vous avez toujours une barre de défilement verticale, mais comme la plupart de mon contenu est plus long que la fenêtre d'affichage, cela me convient. Le contenu est centré à l'aide élément individuel div, mais sans redéfinir la marge dans le corps, mon contenu restera à gauche.

Voici les deux fonctions que j'utilise pour afficher mon popup/modal :

Var popup_bodyTop = 0 ; var popup_bodyLeft = 0 ; function popupShow(id) ( $("#"+ id).effect("fade"); $("#popup-overlay").effect("fade"); // mémorise la position de défilement actuelle // parce que quand position de réglage/désactivation : fixe au corps // le corps défilerait jusqu'à 0,0 popup_bodyLeft = $(document).scrollLeft(); popup_bodyTop = $(document).scrollTop(); // inverser la position var x = - popup_bodyLeft; = - popup_bodyTop; $("body").css("position", "fixed"); $("body").css("top", y.toString() +"px"); .css("left", x.toString() +"px" ) fonction popupHide(id) ( $("#"+ id).effect("fade"); $("#popup -overlay").effect ("fondu"); $("corps").css("position", ""); $("html, corps").scrollTop(popup_bodyTop); $("html, corps" ).scrollLeft(popup_bodyLeft); ;

Résultat : fond non défilant et repositionnement du contenu dû à la barre de défilement gauche. Testé avec FF, Chrome et IE 10 actuels.

Et ça ? (Si vous utilisez jQuery)

Var $fenêtre = $(fenêtre); var $body = $(window.document.body); window.onscroll = function() ( var overlay = $body.children(".ui-widget-overlay").first(); // Vérifiez si la superposition est visible et restaurez l'état de défilement précédent si (overlay.is( ":visible")) ( var scrollPos = $body.data("scroll-pos") || ( x: 0, y: 0 ); window.scrollTo(scrollPos.x, scrollPos.y); ) else ( / / Stockez simplement l'état de défilement $body.data("scroll-pos", ( x: $window.scrollLeft(), y: $window.scrollTop() ) );

En fonction de ce que vous souhaitez réaliser avec le défilement à distance, vous pouvez simplement corriger l'élément dont vous souhaitez supprimer le défilement (au clic ou sur tout autre déclencheur pour lequel vous souhaitez désactiver temporairement le défilement)

Je cherchais une solution "temp no scroll" et pour mes besoins, cela l'a résolu

faire un cours

Fixe (position : fixe ; )

puis avec Jquery

Var someTrigger = $("#trigger"); //un bouton de déclenchement var contentContainer = $("#content"); //élément Je souhaite supprimer temporairement le défilement de contentContainer.addClass("notfixed"); //assurez-vous que l'élément a la classe "notfixed" //Quelque chose pour déclencher le positionnement fixe. Dans ce cas, nous avons choisi un bouton. someTrigger.on("click", function())( if(contentContainer.hasClass("notfixed"))( contentContainer.removeClass("notfixed").addClass("fixed"); )else if(contentContainer.hasClass(" corrigé "))( contentContainer.removeClass("fixed").addClass("notfixed"); ); ));

J'ai trouvé que c'était une solution assez simple qui fonctionne bien dans tous les navigateurs et convient également à facile à utiliser sur des appareils portables (tels que iPhone, tablettes, etc.). Puisque l'élément est temporairement corrigé, il n'y a pas de défilement :)

ATTENTION! En fonction de l'emplacement de votre élément "contentContainer", vous devrez peut-être l'ajuster vers la gauche. Ce qui peut être facilement fait en ajoutant à gauche valeur CSSà cet élément lorsque la classe fixe est active

ContentContainer.css(( "left": $(window).width() - contentContainer.width()/2 //Cela donnerait une valeur qui correspond à la largeur totale de la fenêtre moins l'élément que nous voulons "centrer" divisé par deux (puisqu'il "n'est poussé que d'un côté) ));

De mon projet popup jQuery https://github.com/seahorsepip/jPopup p>

//Geler la fonction de défilement du contenu de la page 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 )); ) ) //Dégeler la fonction de défilement du contenu de la page unfreeze() ( if($("html").css("position") == "fixed") ( $("html").css("position" , "statique"); $("html, corps").scrollTop(-parseInt($("html").css("top"))); $("html").css(("position": "", "width": "", "height": "", "top": "", "overflow-y": ""));

Ce code prend en compte les problématiques de largeur, de hauteur, de barre de défilement et de saut de page.

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

• largeur, avec une position d'installation fixe, la largeur de l'élément html peut être inférieure à 100%
• hauteur la même que ci-dessus
• barre de défilement lorsque, à une position fixe, la position du contenu de la page n'a plus de barre de défilement, même s'il en avait une avant le saut de page
• pagejump, lorsque le paramètre de position est fixe, scrollTop n'est plus en vigueur, provoquant un saut vertical de la page

Si quelqu'un a des améliorations au code de gel/dégel de la page ci-dessus, veuillez me le faire savoir afin que je puisse ajouter ces améliorations à mon projet.

Depuis Chrome 56 et au-delà navigateurs modernes, vous devez ajouter passive:false à l'appel addEventListener pour que PreventDefault fonctionne. J'utilise donc ceci pour arrêter le défilement sur mobile :

Fonction PreventDefault(e)( e.preventDefault(); ) fonction DisableScroll())( document.body.addEventListener("touchmove", PreventDefault, (passive: false )); ) fonction activateScroll())( document.body.removeEventListener (" touchmove ", PreventDefault, ( passif : false ) );

En m'appuyant sur la réponse de Cheyenne Forbes, que j'ai trouvée ici via fcalderan : désactivez simplement le parchemin pour ne pas le masquer ? et correction du problème de disparition de la barre de défilement dans Hallodom

Preventscroll( position : fixe ; overflow-y:scroll; )

Quoi qu'il en soit.onclick = function())( $("body").addClass("preventscroll"); ) everythingtoclose.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 de contournement.

J'ai le même problème, voici comment le résoudre.

/* fichier.js */ var body = document.getElementsByTagName("body"); //si la fenêtre ne défile pas body.classList.add("no-scroll"); //si la fenêtre défile body.classList.remove("no-scroll"); /* fichier.css */ .no-scroll( position : fixe ; haut : 0 ; bas : 0 ; gauche : 0 ; droite : 0 ; )

j'espère que cela aide.

Le moyen le plus simple :

$("corps").css("débordement", "caché"); // Supprime temporairement la barre de défilement

Pour annuler ceci :

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

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

• La page se déplacera légèrement vers la gauche si elle est centrée (horizontalement).

En effet, la barre de défilement a été supprimée et la fenêtre d'affichage est devenue légèrement plus large.

Voici ma solution pour arrêter le défilement (sans jQuery). Je l'utilise pour désactiver le défilement lorsque le menu latéral apparaît.

Désactiver/Activer le scroll var noscroll_var ; function noscroll())( if(noscroll_var)( document.getElementsByTagName("html").style.overflowY = ""; document.body.style.paddingRight = "0"; noscroll_var = false )else( document.getElementsByTagName(" html ").setAttribute("style", "overflow-y: caché !important"); document.body.style.paddingRight = "17px"; noscroll_var = true ) )/*noscroll()*/ for(var i= 0 ;je