[英]Centering Scroll to Element to via # ? (without modifying the DOM / using refs)
我想通過#滾動到某個元素：
<a href="#element">Element</a>
<div name="element" />
它可以很好地完成此任務，但是它到達了元素的最上層。 但是，我希望元素滾動到用戶的中心。
我不願意使用Javascript的scrollTo或其他外部庫，因為我將需要大量使用此功能（非常非常）。 我正在使用React，並且不想過度使用refs和降低我的應用速度。 因此，我希望僅使用HTML來完成此操作。 JS當然也可以，但是我遇到的大多數解決方案都是修改DOM和/或使用refs 。
可能有更好/更干凈的方法，但是只有html / css，我唯一想到的就是在div元素下使用隱藏的span，如下所示：
html { scroll-behavior: smooth; } .space { width: 100%; height: 400px; background-color: blue; } #element { position: relative; top: -50vh; visibility: hidden; }
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <a href="#element">Element</a> <div class="space"></div> <p> some text </p> <div class="space"></div> <p> some text </p> <div class="space"></div> <div> <p> Your element </p> <span id="element">anchor </span> </div> <div class="space"></div> </body> </html>
AFAIK，沒有一點js就無法達到理想的效果。 至於“居中”，則需要一些計算。
<html> <head> <title>Document</title> <style> .placeholder { height: 1000px; } </style> <script> function scrollToDest(event) { var id = event.target.getAttribute("href"); if (id.charAt(0) !== "#") return; // not a valid <a> element var dest = document.getElementById(id.substr(1)); if (!dest) return; // no destination found; event.preventDefault(); // calculate the top and bottom margin remained when dest is centered var margin = window.innerHeight - dest.clientHeight; // what if the dest's height is larger than viewport? if (margin < 0) margin = 0; window.scroll({ left: 0, top: dest.offsetTop - margin / 2, behavior: "smooth" }); } </script> </head> <body> <div class="placeholder"> <a href="#dest" onclick="scrollToDest(event)">Let's go!</a> </div> <div id="dest">ARRIVAL</div> <div class="placeholder"></div> </body> </html>
如何使用react傳單在不使用ref和手動修改DOM的情況下向地圖添加圖例？
[英]How to add a legend to the map using react leaflet, without using refs and manually modifying the DOM?
使用 refs 在 React 中滾動到不同的、可滾動的 div 中的元素
[英]Scroll to an element in a different, scrollable div in React using refs
迭代並修改通過Ajax添加的DOM元素而不使用jQuery
[英]Iterating through and modifying DOM elements added via Ajax without jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.