gpt4 book ai didi

javascript - 我怎样才能使滚动锁定?

转载 作者:行者123 更新时间:2023-12-01 21:50:12 30 4
gpt4 key购买 nike

我只想制作一个像 tesla.com 这样的网站,我在源代码滚动条锁中看到我有一个 html 代码:

<div id="cont-1" class="full-container">
<p> This is container 1 </p>
</div>
<div id="cont-2" class="full-container">
<p> This is container 2 </p>
</div>
<div id="cont-3" class="full-container">
<p> This is container 3 </p>
</div>

和样式.css

.full-container { width: 100%; height: 100vh; }

当我向下滚动或向上滚动时,我想在这里制作,应该锁定在 cont-3 或 cont-2 中,我该怎么做?

示例网站:https://www.tesla.com/

最佳答案

您应该查看较新的 CSS 属性 scroll-snap .如果没有这个,它将成为一大块 JS 脚本。

.container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
width: 256px;
height: 256px;
flex-flow: column nowrap;
scroll-snap-type: y mandatory;
}

.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
line-height: 256px;
font-size: 128px;
width: 256px;
height: 100%;
}

.container > div:nth-child(even) {
background-color: #87EA87;
}

.container > div:nth-child(odd) {
background-color: #87CCEA;
}
<div class="container y proximity-scroll-snapping" dir="ltr">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

关于javascript - 我怎样才能使滚动锁定?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59599438/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com