Questions tagged [scroll-margin-top]

I have a problem with the css property scroll-margin-top (adds offset when scrolling to element on page). It's not working in all the cases, in particular, this case: when the elements with scroll-margin-top are inside a container with overflow:…

At first, it looks simple, and at the end of scroll event, a margin (or padding) will be applied at the top. This is useful when there is a sticky element at the top. Then when a link is clicked and scroll down to somewhere on the page, it's nice to…

On my page I have a fixed navigation bar, so I am using scroll-margin-top to avoid anchored jump targets to disappear behind the navigation bar. This is working fine with all elements, except for , which is a problem when doing automated…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/google-chrome" class="post-tag grid--cell" title="show questions tagged 'google-chrome'" rel="tag">google-chrome</a> <a href="../../questions/tagged/anchor" class="post-tag grid--cell" title="show questions tagged 'anchor'" rel="tag">anchor</a> <a href="../../questions/tagged/scroll-margin-top" class="post-tag grid--cell" title="show questions tagged 'scroll-margin-top'" rel="tag">scroll-margin-top</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 07 '22 at 14:22">asked Oct 07 '22 at 14:22</time> <a href="../../users/217711/arnep" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/217711.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="arnep" /> </a> <div class="s-user-card--info"> <a href="../../users/217711/arnep" class="s-user-card--link">arnep</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,971</li> <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li> <li class="s-award-bling s-award-bling__silver" title="35 silver badges">35</li> <li class="s-award-bling s-award-bling__bronze" title="51 bronze badges">51</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-74147743"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/74147743/pure-css-in-page-anchoring-with-dynamic-height-sticky-header-issues" class="question-hyperlink">Pure CSS in-page anchoring with dynamic height sticky header issues</a></h3> <div class="excerpt">I'm attempting to combine a Pure CSS in page anchoring solution using scroll-behavior: smooth and scroll-margin-top settings, with a position sticky header in-page navigation. Using IntersectionObserver, I detect the top of the sticky element and…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/intersection-observer" class="post-tag grid--cell" title="show questions tagged 'intersection-observer'" rel="tag">intersection-observer</a> <a href="../../questions/tagged/scroll-margin-top" class="post-tag grid--cell" title="show questions tagged 'scroll-margin-top'" rel="tag">scroll-margin-top</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 21 '22 at 01:03">asked Oct 21 '22 at 01:03</time> <a href="../../users/6763282/lscmaro" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6763282.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="lscmaro" /> </a> <div class="s-user-card--info"> <a href="../../users/6763282/lscmaro" class="s-user-card--link">lscmaro</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">995</li> <li class="s-award-bling s-award-bling__silver" title="8 silver badges">8</li> <li class="s-award-bling s-award-bling__bronze" title="22 bronze badges">22</li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>