英文:
How to stick to bottom on scrolling?
问题
我尝试实现一个类似我在这里看到的效果，但每个部分的内容也应该是可滚动的，即它们只有在到达部分底部时才会粘住。
例如，当内容为 200vh 时，如下所示：
section {
position: sticky;
top: 0;
height: 200vh;
}
section img {
width: 100%;
height: 100%;
}
section:nth-of-type(1) {
background: rgb(225, 204, 200);
}
section:nth-of-type(2) {
background: rgb(240, 216, 163);
}
section:nth-of-type(3) {
background: rgb(192, 211, 217);
}
<section>
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/48/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/42/800/300" alt="">
</section>
正如你所看到的，第 1 和第 2 部分粘在顶部，我们无法滚动查看它们的照片，但最后一部分却完美工作。
那么，如何实现这个效果呢？理想情况下使用纯 CSS，但我也可以接受 JavaScript 解决方案。
英文:
I'm trying to achieve a similar I saw here
but the content of each section should also be scroll-able i.e. they should only stick when the bottom of the section has been reached.
for example when the content is 200vh like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
section {
position: sticky;
top: 0;
height: 200vh;
}
section img{
width:100%;
height:100%
}
section:nth-of-type(1) {
background: rgb(225, 204, 200);
}
section:nth-of-type(2) {
background: rgb(240, 216, 163);
}
section:nth-of-type(3) {
background: rgb(192, 211, 217);
}
<!-- language: lang-html -->
<section>
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/48/800/300"alt="">
</section>
<section>
<img src="https://picsum.photos/id/42/800/300" alt="">
</section>
<!-- end snippet -->
as you can see 1 & 2 sections stick to the top & we can't scroll through it's photo<br>
but the last section works perfectly.
so how do I achieve this effect? Ideally with pure css but I'm open to a javascript solution
答案1
得分: 1
我找到了一个解决方案！在JavaScript中使用一行代码来设置top：
document.querySelectorAll(".item").forEach((el) => { el.style.top = (document.documentElement.clientHeight - el.offsetHeight) + "px"; });
虽然我不确定如果窗口大小被调整是否会起作用，但你可以始终使用onresize来处理这种情况。
如果有纯CSS解决方案，我仍然持开放态度，如果有的话？
英文:
I found a solution! Using a one liner in javascript to set the top
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });
<!-- language: lang-css -->
section{
position:sticky;
width:100%;
height:200vh;
}
img{
object-fit:cover;
height:100%;
width:100%;
}
<!-- language: lang-html -->
<section class="item">
<img src="https://picsum.photos/id/128/800">
</section>
<section class="item">
<img src="https://picsum.photos/id/48/800">
</section>
<section class="item">
<img src="https://picsum.photos/id/42/800">
</section>
<!-- end snippet -->
Though I'm not sure if this will work if the window is resized
but you can always use onresize to cover that case
I'm still open to a pure css solution if there is one?
答案2
得分: -1
我已经能够通过将各个部分包裹在一个主div部分中，并添加一些额外的css来解决这个问题，但要实现与你提供的示例完全相同的样式，各部分必须为100vh。使用200vh，这个解决方案仍然有效，但你将需要进行一些额外的滚动以达到下一张幻灯片。我已经准备了一个包含可用代码的codejs 示例，只需将100vh更改为200vh，以查看是否适用于你。
document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });
.mainSection {
position: sticky;
position: -webkit-sticky;
top: 0;
height: 100vh;
}
section {
position: sticky;
position: -webkit-sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
section img {
/*object-fit:cover;*/
width: 70%;
height: 100%;
overflow: scroll;
}
section:nth-of-type(1) {
background: rgb(225, 204, 200);
}
section:nth-of-type(2) {
background: rgb(240, 216, 163);
}
section:nth-of-type(3) {
background: rgb(192, 211, 217);
}
<div class="mainSection">
<section class="item">
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
<section class="item">
<img src="https://picsum.photos/id/48/800/300" alt="">
</section>
<section class="item">
<img src="https://picsum.photos/id/42/800/300" alt="">
</section>
</div>
英文:
I has able to solve this by wrapping the sections into a main div section and few extra lines of css however to achieve the exact same style as the example you gave the sections have to be 100vh. With 200vh this solution still works but you'll have to do some extra scrolling to reach the next slide. I have prepared a codejs fiddle here with the working code, simply change 100vh to 200vh to see if it works for you.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });
<!-- language: lang-css -->
.mainSection {
position: sticky;
position: -webkit-sticky;
top: 0;
height: 100vh;
}
section {
position: sticky;
position: -webkit-sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
section img {
/*object-fit:cover;*/
width: 70%;
height: 100% overflow: scroll;
}
section:nth-of-type(1) {
background: rgb(225, 204, 200);
}
section:nth-of-type(2) {
background: rgb(240, 216, 163);
}
section:nth-of-type(3) {
background: rgb(192, 211, 217);
}
<!-- language: lang-html -->
<div class="mainSection">
<section class="item">
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
<section class="item">
<img src="https://picsum.photos/id/48/800/300" alt="">
</section>
<section class="item">
<img src="https://picsum.photos/id/42/800/300" alt="">
</section>
</div>
<!-- end snippet -->
答案3
得分: -1
我添加了第四张图像，所以你的最后一张图像与中间和开头的图像一样。你只需要调整间距，以便在滚动时可以看到它们。还要去掉"position: sticky"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* {
margin:0;
padding:0;
}
body,html {
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
*/
section {
top: 0;
height: 200vh;
}
section img{
width:100%;
height:100%;
margin-bottom:60px;
}
</style>
</head>
<body>
<section>
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/48/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/42/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
</body>
</html>
注意：以上是你提供的HTML代码的翻译部分，不包括代码部分。
英文:
I added a fourth image so your last image was doing the same as the middle and beggining one. Yoou just have to adjust the spacing so that you can see them being scrolled through. Take off position sticky as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* {
margin:0;
padding:0;
}
body,html {
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
*/
section {
top: 0;
height: 200vh;
}
section img{
width:100%;
height:100%;
margin-bottom:60px;
}
</style>
</head>
<body>
<section>
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/48/800/300"alt="">
</section>
<section>
<img src="https://picsum.photos/id/42/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论