getBoundingClientRect().top неверно указывает координаты?
Ситуация: пишу страницу с "селектором", в котором 8 ссылок. Каждая ссылка должна вести на конкретную главу страницы. По советуЮ решил сделать это через getBoundingClientRect(). Т.е. получать TOP каждой главы и скроллить по нажатию кнопки в селеторе.
Проблема: на первую главу переходит идеально, на вторую, с погрешностью, примерно, в 10px, и эта погрешность увеличивается с каждой главой. На 8 главу перехожу, но попадаю на середину седьмой. Надеюсь ясно объяснил.
В пример код привести не могу, подскажите, пожалуйста, кто сталкивался? Почему есть неточность и из-за чего она может появиться?
Ответы (1 шт):
Автор решения: eccs0103
→ Ссылка
Ответ
Свойство element.getBoundingClientRect().top возвращает позицию элемента относительно верхушки браузера. То есть это не позиция элемента в сайте, это позиция элемента считая с окна просмотра.
Более хорошее решение
Внутреннее перенаправление уже встроено в DOM с помощью ссылок. Дайте id элементу к которому хотите перенаправить и тот же id аттрибуту href у ссылки. Остальное происходит автоматически.
* {
overflow: hidden;
scroll-behavior: smooth;
}<body style="height: 100vh; display: grid; grid-template-columns: 100px 1fr;">
<div>
<a href="#section-a">Раздел А</a>
<a href="#section-b">Раздел Б</a>
</div>
<div style="height: 100%; overflow-y: auto;">
<h1 id="section-a">Раздел А</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet augue quis arcu bibendum venenatis quis eu tellus. Donec vitae tellus porta eros pulvinar iaculis sed vel sapien. Donec a luctus lacus. Integer eu scelerisque est. Nulla eleifend
bibendum sapien, eget facilisis lorem efficitur id. Proin egestas blandit lorem, in fermentum tellus egestas vitae. Mauris maximus volutpat fringilla. Aliquam erat volutpat. Integer metus nibh, bibendum at enim sed, tincidunt ullamcorper erat. Integer
accumsan efficitur risus eget tincidunt. Cras posuere pulvinar posuere. Maecenas placerat porttitor elit. Vestibulum placerat mollis augue aliquet mattis. Nunc sed efficitur arcu, et pharetra odio. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla rutrum, orci nec auctor tempus, odio lorem auctor eros, non euismod ligula nibh quis augue. Mauris id diam in justo convallis sagittis nec viverra purus. Nunc congue at elit nec sodales. Ut a sapien vel mi hendrerit egestas sed eget
diam. Cras congue purus eget aliquam pharetra. Suspendisse nec eros ac lectus ullamcorper malesuada. Vivamus eros purus, vulputate non metus vel, euismod fringilla dolor. Maecenas fringilla consectetur magna, et iaculis tortor porta nec. Maecenas
elementum vehicula turpis ac aliquet. Mauris non maximus orci. Quisque purus sem, consequat at orci at, faucibus sagittis lectus. Praesent fringilla magna nec ligula scelerisque, id tempus dolor feugiat. Sed tincidunt mi in dignissim vestibulum.
Aliquam ut mauris nisl. Vestibulum augue ex, luctus eu lobortis ut, fringilla at magna. Nullam aliquet feugiat turpis, sed ullamcorper urna vehicula commodo. Nunc lobortis aliquam sapien in suscipit. Ut feugiat elit at erat ornare, sit amet laoreet
est feugiat. Nulla ipsum nunc, iaculis quis pharetra sit amet, semper ac velit. In a eros in tortor euismod semper elementum ut enim. Duis congue et dui vel accumsan. In vitae enim posuere, commodo sapien et, imperdiet enim. Etiam finibus tellus
vestibulum felis pellentesque gravida. Maecenas sit amet aliquam est, ut congue turpis. Cras gravida felis vel consequat blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis turpis posuere augue ornare efficitur vel ac justo.
Vestibulum blandit leo sit amet ante tempus, a luctus nisi posuere. Nunc ultricies enim a enim accumsan ultricies. Nam a ultrices purus. Praesent eu tincidunt neque. Phasellus rhoncus vitae erat sed dapibus. Sed porta, dolor aliquam molestie rhoncus,
libero tellus sollicitudin dui, eget tincidunt arcu quam vitae justo. Pellentesque eros elit, eleifend id mi non, ultrices venenatis ligula. In hac habitasse platea dictumst. Cras a justo venenatis urna hendrerit venenatis. Quisque et pellentesque
elit. Vestibulum mattis maximus fringilla. Maecenas cursus semper ligula semper venenatis. Cras tincidunt, neque in auctor lobortis, leo lectus pellentesque nisl, aliquet posuere velit nisl at purus. Nunc in nunc in dui accumsan tempor. Fusce auctor
dolor vel magna congue rutrum. Fusce faucibus ut ante eu feugiat. Cras fringilla urna sit amet orci pulvinar, sed facilisis odio pharetra. Curabitur ut quam ullamcorper, tincidunt mauris eget, convallis turpis. Nunc dictum dolor at metus scelerisque
varius. Aliquam et odio scelerisque, aliquam lacus vel, varius tortor. Sed dictum ligula nec libero gravida dignissim. Maecenas nec est in sapien auctor tristique vel quis erat. Phasellus urna ipsum, euismod quis est in, blandit egestas metus. Aliquam
metus ex, sollicitudin ornare facilisis aliquet, suscipit consequat nisl. Sed mollis nunc sed nulla bibendum, et bibendum orci pellentesque. Donec luctus venenatis efficitur. Cras et arcu et nunc sodales rutrum. Maecenas sed interdum nisi. Suspendisse
non odio bibendum, volutpat mauris a, iaculis tortor. Sed ipsum mauris, elementum ac nisi nec, semper venenatis urna.</p>
<h1 id="section-b">Раздел Б</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet augue quis arcu bibendum venenatis quis eu tellus. Donec vitae tellus porta eros pulvinar iaculis sed vel sapien. Donec a luctus lacus. Integer eu scelerisque est. Nulla eleifend
bibendum sapien, eget facilisis lorem efficitur id. Proin egestas blandit lorem, in fermentum tellus egestas vitae. Mauris maximus volutpat fringilla. Aliquam erat volutpat. Integer metus nibh, bibendum at enim sed, tincidunt ullamcorper erat. Integer
accumsan efficitur risus eget tincidunt. Cras posuere pulvinar posuere. Maecenas placerat porttitor elit. Vestibulum placerat mollis augue aliquet mattis. Nunc sed efficitur arcu, et pharetra odio. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla rutrum, orci nec auctor tempus, odio lorem auctor eros, non euismod ligula nibh quis augue. Mauris id diam in justo convallis sagittis nec viverra purus. Nunc congue at elit nec sodales. Ut a sapien vel mi hendrerit egestas sed eget
diam. Cras congue purus eget aliquam pharetra. Suspendisse nec eros ac lectus ullamcorper malesuada. Vivamus eros purus, vulputate non metus vel, euismod fringilla dolor. Maecenas fringilla consectetur magna, et iaculis tortor porta nec. Maecenas
elementum vehicula turpis ac aliquet. Mauris non maximus orci. Quisque purus sem, consequat at orci at, faucibus sagittis lectus. Praesent fringilla magna nec ligula scelerisque, id tempus dolor feugiat. Sed tincidunt mi in dignissim vestibulum.
Aliquam ut mauris nisl. Vestibulum augue ex, luctus eu lobortis ut, fringilla at magna. Nullam aliquet feugiat turpis, sed ullamcorper urna vehicula commodo. Nunc lobortis aliquam sapien in suscipit. Ut feugiat elit at erat ornare, sit amet laoreet
est feugiat. Nulla ipsum nunc, iaculis quis pharetra sit amet, semper ac velit. In a eros in tortor euismod semper elementum ut enim. Duis congue et dui vel accumsan. In vitae enim posuere, commodo sapien et, imperdiet enim. Etiam finibus tellus
vestibulum felis pellentesque gravida. Maecenas sit amet aliquam est, ut congue turpis. Cras gravida felis vel consequat blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis turpis posuere augue ornare efficitur vel ac justo.
Vestibulum blandit leo sit amet ante tempus, a luctus nisi posuere. Nunc ultricies enim a enim accumsan ultricies. Nam a ultrices purus. Praesent eu tincidunt neque. Phasellus rhoncus vitae erat sed dapibus. Sed porta, dolor aliquam molestie rhoncus,
libero tellus sollicitudin dui, eget tincidunt arcu quam vitae justo. Pellentesque eros elit, eleifend id mi non, ultrices venenatis ligula. In hac habitasse platea dictumst. Cras a justo venenatis urna hendrerit venenatis. Quisque et pellentesque
elit. Vestibulum mattis maximus fringilla. Maecenas cursus semper ligula semper venenatis. Cras tincidunt, neque in auctor lobortis, leo lectus pellentesque nisl, aliquet posuere velit nisl at purus. Nunc in nunc in dui accumsan tempor. Fusce auctor
dolor vel magna congue rutrum. Fusce faucibus ut ante eu feugiat. Cras fringilla urna sit amet orci pulvinar, sed facilisis odio pharetra. Curabitur ut quam ullamcorper, tincidunt mauris eget, convallis turpis. Nunc dictum dolor at metus scelerisque
varius. Aliquam et odio scelerisque, aliquam lacus vel, varius tortor. Sed dictum ligula nec libero gravida dignissim. Maecenas nec est in sapien auctor tristique vel quis erat. Phasellus urna ipsum, euismod quis est in, blandit egestas metus. Aliquam
metus ex, sollicitudin ornare facilisis aliquet, suscipit consequat nisl. Sed mollis nunc sed nulla bibendum, et bibendum orci pellentesque. Donec luctus venenatis efficitur. Cras et arcu et nunc sodales rutrum. Maecenas sed interdum nisi. Suspendisse
non odio bibendum, volutpat mauris a, iaculis tortor. Sed ipsum mauris, elementum ac nisi nec, semper venenatis urna.</p>
</div>
</body>