div 元素的 HTML 滚动框答案

【问题标题】：Html scroll box for div elementsdiv 元素的 HTML 滚动框
【发布时间】：2022-11-24 16:04:03
【问题描述】：

我有这些“容器”，它们本质上是带有标题和一两个带有悬停动画的句子的块。我试图通过仅在屏幕上的一个区域向下滚动来让多个块垂直排列。

<div style="width: 300px; height: 100px; overflow-y:auto;">
<div class="container">
                <div class="fancy_card">
                    <div class="card_text">     
                        <h3 class="title">Title</h3>
                        <div class="summary">
                            Content
                        </div>
                        </div>
                    </div>
                </div>

我试过使用 overflow-y:auto、overflow:scroll，我已经改变了高度，但我还是想不通。任何帮助，将不胜感激。

【问题讨论】：

您好，当我运行您的代码时，它对我有用。我能够滚动浏览不同的块，同时保持在 100 像素高度的容器内。我在 Chrome 上试过。

标签： javascript html css scrollbar

【解决方案1】：

   <div style="width: 300px; height: 100px; overflow-y: auto">
      <div class="container">
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
      </div>
    </div>

这已经有效了。您只需要足够的内容使其需要滚动即可。

【讨论】：