如何滚动到具有粘性定位的元素？
[英]How can I scroll to an element with sticky positioning?
问题描述
I have the following code and I want to use ids to switch between slides, but with an id it doesn't work and als with JS scrollTo, scrollIntoView and other variations.
我有以下代码，我想使用 id 在幻灯片之间切换，但是使用 id 它不起作用，并且与 JS scrollTo、scrollIntoView 和其他变体一起使用。 It works on the way down but not up.它在下降的过程中起作用，但在上升时不起作用。
I try to make a website which overlaps with itself and creates a nice progressive flow for surveys.我尝试制作一个与自身重叠的网站，并为调查创建一个很好的渐进式流程。 It should also be able to move to a previous slide, so you can enter or change some answer in such a survey.它还应该能够移动到上一张幻灯片，因此您可以在此类调查中输入或更改某些答案。
I hope you can help me and maybe see something which i didn't see.我希望你能帮助我，也许能看到一些我没有看到的东西。
// set color for each slide window.onload = function() { let slides = [...document.getElementsByClassName("slide")]; for(let n in slides) { let slide = slides[n]; slide.style.backgroundColor = "hsl("+((360 / slides.length) * n)+", 100%, 25%)"; } }
body { font-size: 3vw; margin: 0; padding: 0; position: relative; } #ref { background-color: black; position: fixed; top: 0; z-index: 1000; } #ref a { color: white; text-decoration: none; }.slide { background-color: #404050; border: 1px solid white; color: white; height: calc(100vh - 2px); left: 0; position: sticky; top: 0; width: calc(100vw - 2px); }
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="ref"> <a href="#s1">S1</a> <a href="#s2">S2</a> <a href="#s3">S3</a> <a href="#s4">S4</a> <a href="#s5">S5</a> <a href="#s6">S6</a> <a href="#s7">S7</a> <a href="#s8">S8</a> <a href="#s9">S9</a> </div> <div id="s1" class="slide"> <h1>Slide 1</h1> </div> <div id="s2" class="slide"> <h1>Slide 2</h1> </div> <div id="s3" class="slide"> <h1>Slide 3</h1> </div> <div id="s4" class="slide"> <h1>Slide 4</h1> </div> <div id="s5" class="slide"> <h1>Slide 5</h1> </div> <div id="s6" class="slide"> <h1>Slide 6</h1> </div> <div id="s7" class="slide"> <h1>Slide 7</h1> </div> <div id="s8" class="slide"> <h1>Slide 8</h1> </div> <div id="s9" class="slide"> <h1>Slide 9</h1> </div> </body> </html>
2 个解决方案
解决方案1
0 2021-03-24 19:20:49
Absolutely loved the implentation.绝对喜欢实施。 Such small css and so powerful effect.这么小的css等等强大的效果。
But seems like Browser don't do the # magic with sticky elements.但似乎浏览器不使用粘性元素执行 # 魔法。 Although this could have been solved with JS, but thought of having a HTML-CSS solution to it by a little tweak in the HTML (adding an extra static element for # reference).虽然这可以用 JS 解决，但想到通过在 HTML 中进行一些调整来获得一个 HTML-CSS 解决方案（添加一个额外的 static 元素以供参考）。 Hope you like the solution.希望你喜欢这个解决方案。
// set color for each slide window.onload = function() { let slides = [...document.getElementsByClassName("slide")]; for(let n in slides) { let slide = slides[n]; slide.style.backgroundColor = "hsl("+((360 / slides.length) * n)+", 100%, 25%)"; } }
body { font-size: 3vw; margin: 0; padding: 0; position: relative; } #ref { background-color: black; position: fixed; top: 0; z-index: 1000; } #ref a { color: white; text-decoration: none; }.slide { background-color: #404050; border: 1px solid white; color: white; height: calc(100vh - 2px); left: 0; position: sticky; top: 0; width: calc(100vw - 2px); }
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="ref"> <a href="#s1">S1</a> <a href="#s2">S2</a> <a href="#s3">S3</a> <a href="#s4">S4</a> <a href="#s5">S5</a> <a href="#s6">S6</a> <a href="#s7">S7</a> <a href="#s8">S8</a> <a href="#s9">S9</a> </div> <div id="s1"> </div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 1</h1> </div> <div id="s2"></div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 2</h1> </div> <div id="s3"></div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 3</h1> </div> <div id="s4"></div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 4</h1> </div> <div id="s5"></div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 5</h1> </div> <div id="s6"></div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 6</h1> </div> <div id="s7"></div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 7</h1> </div> <div id="s8"></div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 8</h1> </div> <div id="s9"></div><!--Extra static element for # reference--> <div class="slide"> <h1>Slide 9</h1> </div> </body> </html>
解决方案2
0 已采纳 2021-03-24 22:36:02
After trying a long time I found a solution but it is very specific.经过长时间的尝试，我找到了一个解决方案，但它非常具体。
You need to have a parent element which only includes the slides (in this case it is main ), then you need to give the parent element a height and an overflow auto.您需要有一个仅包含幻灯片的父元素（在本例中为main ），然后您需要给父元素一个高度和一个溢出自动。
After those steps add the javascript, which gets the selected element and its parent (here again main ), then calculates the average height per element, after that it gets the index of the elem relative to the parent and multiplies it with the height to get the scrollOffset, which is in the last step set for the parent.在这些步骤之后，添加 javascript，它获取所选元素及其父元素（这里也是main ），然后计算每个元素的平均高度，之后它获取元素相对于父元素的索引并将其乘以高度得到scrollOffset，这是为父级设置的最后一步。
// set color for each slide window.onload = function() { let slides = [...document.getElementsByClassName("slide")]; for(let n in slides) { let slide = slides[n]; slide.style.backgroundColor = "hsl("+((360 / slides.length) * n)+", 100%, 25%)"; } } window.onhashchange = function() { let hash = document.body.querySelector(location.hash); let parent = hash.parentElement; let scrollOffset = parent.scrollHeight / parent.childElementCount; scrollOffset *= Array.prototype.indexOf.call(parent.children, hash); parent.scrollTop = scrollOffset; }
body { font-size: 3vw; margin: 0; padding: 0; position: relative; } #ref { background-color: black; position: fixed; top: 0; z-index: 1000; } #ref a { color: white; text-decoration: none; } main { height: 100vh; overflow: auto; }.slide { background-color: #404050; border: 1px solid white; color: white; height: calc(100vh - 2px); left: 0; position: sticky; top: 0; width: calc(100vw - 2px); }
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="ref"> <a href="#s1">S1</a> <a href="#s2">S2</a> <a href="#s3">S3</a> <a href="#s4">S4</a> <a href="#s5">S5</a> <a href="#s6">S6</a> <a href="#s7">S7</a> <a href="#s8">S8</a> <a href="#s9">S9</a> </div> <main> <div id="s1" class="slide"> <h1>Slide 1</h1> </div> <div id="s2" class="slide"> <h1>Slide 2</h1> </div> <div id="s3" class="slide"> <h1>Slide 3</h1> </div> <div id="s4" class="slide"> <h1>Slide 4</h1> </div> <div id="s5" class="slide"> <h1>Slide 5</h1> </div> <div id="s6" class="slide"> <h1>Slide 6</h1> </div> <div id="s7" class="slide"> <h1>Slide 7</h1> </div> <div id="s8" class="slide"> <h1>Slide 8</h1> </div> <div id="s9" class="slide"> <h1>Slide 9</h1> </div> </main> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.