À l'aide de scrollIntoView avec une position fixe de l'en-tête
J'ai un site avec un en-tête défini à position: fixed
. Sur une de mes pages, j'utilise scrollIntoView(true)
sur un élément. Mon problème est que lorsque scrollIntoView
est appelée, l'élément est placé sous l'en-tête. Comment pourrais-je résoudre ce problème de manière que l'élément est affiché juste en dessous de l'en-tête?
Je suis en utilisant le Bootstrap cadre et l'en-tête est de style avec navbar navbar-fixed-top
.
Vous devez vous connecter pour publier un commentaire.
C'est très orthodoxe, mais voici une solution de contournement.
window.scroll(0, node.offsetTop - yourHeight);
et n'utilisant pas descrollIntoView
Vous pouvez résoudre ce problème avec le CSS, par l'application d'un
padding-top
et un négatifmargin-top
pour les éléments que vous souhaitez faire défiler jusqu'à.Démo
JS:
CSS:
HTML:
Le code suivant génère une lisse de défilement vers le haut de l'élément avec un décalage de l'en-tête fixe:
Où XX est la hauteur de votre en-tête fixe.
mat-card-content
que mon défilant aria avec unmat-toolbar
que mon en-tête fixe. J'ai utiliséngx-scroll-to
pour ma défilement, mais il ne fonctionne pas dans le mobile. Cependant, votre solution travaillé dans le mobile, mais pas de manière autonome, alors que le mentionné paquet travaillé vice verca. Combiné à la fois et le tour est joué! MERCI!Si une personne se heurte à des problèmes avec la marge du haut de votre conteneur div être ignoré après un scrollIntoView, alors plutôt que de faire défiler votre élément dans la vue, il suffit de faire une scrollTop par rapport à son parent de défilement conteneur, en tant que tel:
Eu la réponse de user113716 sur ce fil: Comment aller à un élément spécifique à la page?
Essayez les solutions suivantes. Il fonctionne bien pour moi:
Dans le cas où si quelqu'un a fixé barre de navigation qui se cache en-Tête\Titre après le défilement, voici la solution (basé sur
@coco puffs
's réponse et cette une):Dans le code
70px
sont utilisés.Je soupçonne que ce sera le travail pour l'individu dépendra beaucoup de leur mise en page, de sorte que cette réponse est conçu comme une option supplémentaire plutôt que d'usurper n'importe qui.
Tout ce que j'avais à faire était de passer de faux pour faire défiler l'affichage
scrollIntoView(false)
Grâce à redémarrage jeff
de défilement-margin-top: $header-hauteur;
Il y a un nouveau non-hacky façon de parvenir à ce qui fonctionne pour norme des liens HTML et js scrollIntoView. à l'aide de la
scroll-margin-top
propriété CSS.Vous pouvez utiliser la propriété CSS de défilement-margin-top à la même hauteur que l'en-tête.
Ce n'est pas ajouter visible de la marge, mais ajoute de l'espace au-dessus d'un élément lors de la liaison à elle.
Puis-je utiliser de défilement-margin-top? Cela ne fonctionne pas sous IE, et edge HTML (pré-2020).
MDN docs de défilement-margin-top
J'ai ajouté à défilement lisse à la démo ci-dessous de sorte qu'il est évident que c'est à l'aide de scrollIntoView.
Vue dans codepen
JS:
CSS:
HTML: