如何滚动到具有粘性定位的元素？答案

【问题标题】：How can I scroll to an element with sticky positioning?如何滚动到具有粘性定位的元素？
【发布时间】：2021-03-25 13:58:10
【问题描述】：

我有以下代码，我想使用 id 在幻灯片之间切换，但使用 id 它不起作用，并且与 JS scrollTo、scrollIntoView 和其他变体一起使用。它在下降时起作用，但在上升时不起作用。

我尝试创建一个与自身重叠的网站，并为调查创建一个很好的渐进式流程。它还应该能够移动到上一张幻灯片，因此您可以在此类调查中输入或更改某些答案。

我希望你能帮助我，也许能看到一些我没有看到的东西。

// 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>

【问题讨论】：

附带说明：for(let n in slides) 必须是 for(let slide of slides) 才能进行数组迭代。
我知道，但我需要索引来生成色调和每种颜色
这也是一种可能的方式，但我认为我的方式也可以，对吧？但是您知道如何跳到另一张幻灯片吗？
然后使用for(let [n, slide] of slides.entries())。抱歉，我 f/&%$ 修改了语法。
问题是我可以点击一个链接让我走得更远，但如果我点击更高的链接我就没有工作

标签： javascript html css css-position sticky

【解决方案1】：

尝试了半天找到了解决办法，但是很具体。

你需要有一个只包含幻灯片的父元素（在本例中是main），然后你需要给父元素一个高度和一个溢出自动。

在这些步骤之后添加 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>

【讨论】：

【解决方案2】：

绝对喜欢这个实施。这么小的css，这么强大的效果。

但似乎浏览器并没有对粘性元素施展#魔法。虽然这可以用 JS 解决，但是想到了一个 HTML-CSS 解决方案，通过在 HTML 中进行一些调整（添加一个额外的静态元素用于 # 引用）。希望你喜欢这个解决方案。

// 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>

【讨论】：

感谢您的好话，非常感谢您的解决方案。我会尝试实现它，如果它有效，你会注意到的。
我刚刚注意到粘性效果因更改而丢失，但您的解决方案仍然可以工作
更新了解决方案。刚刚添加了一个空的 div。
我实际上首先发布了这个带有空 div 的解决方案......但编辑了清理它的解决方案。