时间戳

首页 > 解决方案 > 水平滚动未按预期工作

html - 水平滚动未按预期工作

问题描述

您好，我正在尝试实现水平滚动（使用滚动条）但我无法正常工作我有 2 个 div 1 个用于滚动和 1 个主 div 我想在主 div 上显示项目但是当我这样做时整个 div 滚动，而不仅仅是项目。我怎样才能让它工作？

滚动 div

<div class="scrolling-wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

主格

<div class="main">

</div>

CSS

.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}


   .item {
        display: inline-block;
        align-self: flex-start;
        background-color: var(--pampas);
        border-radius: 10px;
        flex-shrink: 0;
        height: 269px;
        margin-left: 210px;
        margin-top: 13px;
        width: 200px;
    }

.main {
  align-items: center;
  background-color: white;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: flex-start;
  min-height: 1080px;
  padding: 26px 0;
  width: 1920px;
}

这是它现在的样子

这是它现在的样子。

谢谢<3

标签： htmlcss

解决方案

如果我正确理解您的问题，您希望所有项目一起滚动（即不是每个项目单独滚动），但只能在div.scrolling-wrapper其中是div.main.

这仅在您限制div.scrolling-wrapper.

你很可能需要

.scrolling-wrapper {
   width: 100%;
   /* you can also use max-width instead */
}

100%指的是父级的宽度，在这种情况下是div.main. 这是必要的，因为您已经display:flex设置了div.main哪个具有其子div.scrolling-wrapper级将其子级（.items）宽度之和作为其默认宽度的效果。

作为旁注：请注意以下与您设置的 flexbox 相关的规则.item：

   align-self: flex-start;
   flex-shrink: 0;

除非有一些您在原始帖子中未提及的设置.scrolling-wrapper为display:flex.

推荐阅读