reactjs 如何使用JavaScript滚动第一个div溢出，然后在主体滚动之后？

j5fpnvbx 于 2023-03-12 发布在 React

关注(0)|答案(1)|浏览(93)

<body>
<div class="container" style="overflow-y:scroll, width:100%,height:500px">
<div class="overFlow" style="width:60%,height:"1000px,background-color:red,display;flex,align-items:center,justify-content:space-between">
</div>
<div class="formCContainer" style="width:40%">
<form>
<label style="width:100%">
<input placeholder="enter your name" type="text/>
</label >
<label style="width:100%">
<input placeholder="enter your password" type="password"/>
</label>
 <button typle="submit">Submit</button>
</form>
</div>
</div>
</body>

正如您在上面的代码中所看到的，我在body标记下定义了三个div：第一个div具有100%的宽度和500 px的高度;第二个div是第一个div的子项，60%的宽度和1000 px的高度，导致溢出;最后一个div有40%，现在我希望用户滚动时，先滚动完div.overFlow，然后滚动完body，我尝试了很多方法在Google和ChatGTP上找到解决方案，但是我无法存档，请一定要帮助我。
请帮助我编写JavaScript代码，请不要包含jQuery

reactjs

来源：https://stackoverflow.com/questions/75704193/how-to-scroll-first-div-overflow-then-after-that-body-scroll-by-using-javascript

1条答案

按热度按时间

v8wbuo2f1#

更新的答案

OP需要一个粘滞的侧边栏。如果有人陷入了同样的问题，请继续阅读。查看code-sandbox以获得Approoch的动手能力。
我们可以很容易地使用CSS属性position来实现这个结果。

.element-you-want-to-stick{
    position:sticky;
    top:0; 
}

在这里，我们使用top:0;使其固定到top.you，可以使用bottom、left、right

旧答案

所以你想滚动溢出元素然后滚动body
您描述的行为通常通过将CSS overscroll-behavior设置为auto来实现

.overflow{
       overscroll-behavior:auto;
    }

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 如何使用JavaScript滚动第一个div溢出，然后在主体滚动之后？

1条答案

更新的答案

旧答案

相关问题

热门标签

最新问答