ScrollTo 不适用于滚动快照和 100vh 容器

Question

When I have a .sections container with several .section elements inside, and setup scroll-snap, it will ONLY work if I give the section a fixed height of 100vh.当我有一个.sections容器，里面有几个.section元素，并设置滚动快照时，只有当我给这个部分一个固定的 100vh 高度时它才会工作。 Without the height, the scroll-snap will not work.没有高度，滚动快照将不起作用。 This is fine, except without the fixed height, scrollTo works correctly, and when I add the height to the section, scrollTo no longer works.这很好，除非没有固定高度， scrollTo可以正常工作，并且当我将高度添加到该部分时， scrollTo不再起作用。

Here is an example.这是一个例子。 You can comment out the height: 100vh;可以注释掉height: 100vh; line in the .section CSS and see that clicking anywhere will scroll down to section #3, but with the height turned on, it won't scroll. .section CSS 中的一行，并看到单击任意位置将向下滚动到第 #3 部分，但打开高度后，它不会滚动。

I have tried to console.log the position it is scrolling to and it is correct, but the scroll never actually takes place.我试图在console.log中记录它滚动到的位置并且它是正确的，但是滚动实际上从未发生过。 Any ideas as to why this is not behaving the way I would like?关于为什么这不像我想要的那样行事的任何想法？

NOTE: I am seeing this behavior in the latest Chrome.注意：我在最新的 Chrome 中看到了这种行为。 I have not tested another browser.我还没有测试过其他浏览器。

 // Click on document to scroll to section 3 document.body.onclick = function() { console.log('SCROLLING...'); const el = document.getElementById('s3'); const pos = el.getBoundingClientRect(); window.scrollTo(0, pos.top); }

 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .sections { overflow-y: scroll; scroll-snap-type: y mandatory; /** * Adding the below line breaks scrollto, removing * it breaks scroll-snap.... */ height: 100vh; } .section { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; position: relative; border: 5px solid deeppink; font-size: 30px; font-weight: bold; scroll-snap-align: center; }

 <html> <body> <div class="sections"> <div class="section" id="s1">SECTION 1</div> <div class="section" id="s2">SECTION 2</div> <div class="section" id="s3">SECTION 3</div> <div class="section" id="s4">SECTION 4</div> <div class="section" id="s5">SECTION 5</div> </div> </body> </html>

Answer 1

Thanks to @Temani Afif for the comment.感谢@Temani Afif 的评论。 They correctly pointed out that I cannot scroll using the body, I need to scroll using the .sections container.他们正确地指出我无法使用主体滚动，我需要使用.sections容器滚动。

Here is a working example now:现在是一个工作示例：

 // Click on document to scroll to section 3 document.body.onclick = function() { console.log('SCROLLING...'); const el = document.getElementById('s3'); const pos = el.getBoundingClientRect(); const sections = document.querySelector('.sections'); sections.scrollTo(0, pos.top); }

 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .sections { overflow-y: scroll; scroll-snap-type: y mandatory; height: 100vh; } .section { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; position: relative; border: 5px solid deeppink; font-size: 30px; font-weight: bold; scroll-snap-align: center; }

 <html> <body> <div class="sections"> <div class="section" id="s1">SECTION 1</div> <div class="section" id="s2">SECTION 2</div> <div class="section" id="s3">SECTION 3</div> <div class="section" id="s4">SECTION 4</div> <div class="section" id="s5">SECTION 5</div> </div> </body> </html>

ScrollTo 不适用于滚动快照和 100vh 容器

问题描述

1 个解决方案

解决方案1
0 2020-01-29 14:07:28

ScrollTo 不适用于滚动快照和 100vh 容器

问题描述

1 个解决方案

解决方案1 0 2020-01-29 14:07:28

解决方案1
0 2020-01-29 14:07:28