React JS：如何在一个特定的 div 中实现滚动条？

Question

我正在创建一个电影应用程序。 我在实现滚动条时遇到了一些问题。

滚动时，我希望标题 div 保持原样。 我不希望它在向下滚动时消失。 但是位于标题垂直底部的 div 必须是可滚动的。

这可以在 amazon.in 中找到

在搜索哈利波特时，此页面会加载

向下滚动时，您可以看到标题保持固定。

我如何在 React 中实现它？ 请分享必要的代码/文档。 谢谢！

Answer 1

这实际上与 React 无关。 这与基本的 HTML 和 CSS 知识有关。

这是我的首选方法：

<div id="navbar">...</div>
<div id="content">...</div> 

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

#content {
  margin-top: /* size of navbar */ 50px;
}

Answer 2

您可以使用具有一定高度的overflow属性在div添加滚动条。

CSS：

float:left; 
width:1000px; 
overflow-y: auto; 
height: 100px;

HTML：

<div class="ScrollStyle"> 
  Scrollbar Test!<br/> 
  Scrollbar Test!<br/> 
</div>