Bonjour,
J'ai deux div une avec une navbar et une autre ou j'ai mis un iframe avec mon rapport power bi je souhaite afficher le navbar quand je scrolle vers le bas j'ai ce message dans la console du navigateur :
Voila mon code :Ce site semble utiliser un effet de positionnement lié au défilement. Cet effet pourrait ne pas fonctionner correctement avec le défilement asynchrone. Consultez https://developer.mozilla.org/docs/M...lLinkedEffects pour obtenir davantage de détails ou discuter des outils et des fonctionnalités liés.
CSS :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <div class="divNav scroll-up" > <table class="header1" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" style="text-align:center"><span class="spanHeader1"><img id="logo2" src="assets\icons\poupee1.png"></span></td> <td colspan="2" style="text-align:center"><hr class="leftLine"><span class="spanHeader1">Overview</span> <hr ></td> <td colspan="2" style="text-align:center"><span class="spanHeader1">Daily</span><hr></td> <td colspan="2" style="text-align:center"><span class="spanHeader1">Dash Quanti</span><hr ></td> </tr> </table> </div> <div class="report" > <iframe (scroll)="onWindowScroll($event);" [src]="this.linkReport" frameborder="0" allowFullScreen="true"></iframe> </div>
Typescript :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 .scroll-up { visibility: hidden; } .scroll-down { visibility: visible; }
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 @HostListener('scroll', ['$event']) onWindowScroll(e) { if (window.scrollY >20) { let menu = document.querySelector(".divNav"); menu.classList.add("scroll-down"); menu.classList.remove("scroll-up"); console.log("ok") } }
Merci pour votre aide
Partager