Discussion :

[NewUserDelphi]

Bonjour

J essaie d’empêcher le scroll de ma page quand une div menu est affiché et l'autoriser quand la div menu n est pas visible.
pour cela j utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 function openNav() {
 
            /*AFFICHE LA DIV MENU */
            document.getElementById("mySidenav").style.width = "300px";
 
            /*NEUTRALISE LE SCROLL*/
            window.addEventListener("scroll", function (e) {
 
                window.scrollTo(0, 0);
 
            }, false);
        }
 
        function closeNav() {
            /*CACHE LA DIV MENU*/
            document.getElementById("mySidenav").style.width = "0";
 
            /* AUTORISE LE SCROLL*/
            window.removeEventListener("scroll", true);
        }

Quand la div menu s affiche mon scroll est neutralisé mais aussi quand elle est cachée.
La ligne qui me pose don pb est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.removeEventListener("scroll", true);

comment proceder s il vous plait ?

merci pour votre aide.

[psychadelic]

Ça marche pas comme ça, window est un élément "propriétaire" du navigateur, et on ne peut lui interdire de gérer un scroll

la seule chose possible c'est en css de mettre l'overflow de la page sur hidden

[NewUserDelphi]

Ça marche pas comme ça

Désolé mais je ne comprends pas. Tu veux dire que ce n est pas une bonne pratique parce que ça fonctionne pourtant. mon seul pb est de "supprimer" ce listener.

Donc je devrai rajouter un overflow:hidden à mon body si je comprends bien.

[NoSmoking]

Bonjour,
peut être que ton approche n'est pas la bonne. Si j'ai bien compris ...

• Premier besoin afficher/masquer un menu, au click sur un élément de la page, cela se fait en une trois lignes de code dans une fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function toggleMenu(id_element) {
    var elem = document.getElementById(id_element);
    if (elem) {
        elem.style.display = elem.offsetHeight ? "none" : "block";
    }
}

• Deuxième besoin, quand le menu est affiché alors pas de scroll du document.

Tu as dans ce cas au moins deux méthodes possibles :

• Surveiller lors d'un scroll du document si le menu est affiché, si oui on remet à zéro sinon on laisse faire. L’inconvénient de cette méthode sera que le scroll sera entamé puis rétabli d'où un « scintillement/saut » à l'écran.

• Une autre méthode consiste à placer ton menu en position:fixed, ce qui se fait généralement.

[psychadelic]

Il y a ta logique, et il y a la logique des pages web.
sur ce coup la, ces 2 logiques ne correspondent pas, ou si tu préfères ta logique n'est pas la bonne pour correspondre avec celle du W3C, et à moins de leur faire une demande pour changer cet état de fait puis d'attendre que tous les navigateurs intègrent ton desiderata dans quelques années, tu aura plus vite fait de réajuster ta logique.


sinon, on décortique :

le principe de "addEventListener" :
== element.addEventListener( type, listener, options); ==

-- élément = n'importe quel élément présent sur la page html : un bouton, un lien, une div, un élément de liste, et même l'élément maitre window.
-- le type = le type événement = un click, un mouse over, un scroll ...
-- listener = une fonction qu'on doit écrire et qui s'active quand l'événementse produit sur l'élément.


le principe de "removeEventListener":
== target.removeEventListener(type, listener[, options]); ==

-- target = le même élément que celui sur lequel on à placé une écoute avec un addEventListener
-- le type = le même type événement que celui sur lequel on à placé une écoute avec un addEventListener
-- listener = la même fonction que celle sur laquelle on à placé une écoute avec un addEventListener


ce que fait le navigateur avec tout ça :

par principe, il peut se produire n'importe quel événement sur n'importe quel élément de la page, et pour chacun d'eux il peut y avoir
un comportement par défaut que le navigateur applique.

Quand on code un "addEventListener" on lui demande d'AJOUTER dans son gestionnaire d'événement un fonction à réaliser EN PLUS de ce qu'il fait habituellement.

Quand on code ensuite un "removeEventListener" on lui demande de RETIRER de sa liste des trucs à faire en plus sur les événements une fonction.

On ne peut pas interdire au navigateur d'utiliser un événement en particulier.


DANS TON CAS de code...
window.addEventListener("scroll", function (e) { ... ==> tu utilises une fonction anonyme, ce qui la rend "indébranchable".

ma solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function Better_openNav() { 
  document.body.style.overflow = "hidden";
}
 
function Better_closeNav() { 
  document.body.style.overflow = "auto";
}

La solution à ta question ( pour ne pas te laisser dans l'ignorance du comment on peut utiliser une fonction non anonyme dans un addEventListener)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function fctKillScroll(e)
{
  window.scrollTo(0, 0);
}
 
function Bad_openNav() { 
  window.addEventListener("scroll", fctKillScroll, true); // avec false le remove ne marchera pas, je te laisse découvrir la doc à ce sujet
}
 
function Bad_closeNav() { 
  window.removeEventListener("scroll", fctKillScroll, true);
}

[Watilin]

Pour compléter l’explication de psychadelic, je rajoute que l’évènement scroll n’est pas annulable, même avec .preventDefault(), et ce d’après la spec.

Il y a aussi le risque que l’appel à .scrollTo() génère lui aussi des évènements scroll sur certaines plateformes, ce qui pourrait provoquer une saturation de la file des évènements. C’est juste une théorie, je n’ai pas testé. Mais ça me fait juste penser que cette solution n’est pas la plus élégante.

Les solutions à base de CSS de NoSmoking et psychadelic sont plus simples (d’ailleurs le coup du overflow: hidden je l’ai vu sur un gros site de presse récemment).

[NewUserDelphi]

Merci à vous trois pour vos explications on ne peut plus claires !

Par contre je mets de coté la suggestion de demande à W3C