如何将溢出可见和滚动结合起来？

Question

我正在构建一个滑块组件。它使用 Bootstrap .container 类来包含在指定的页面宽度中，但需要溢出到屏幕的右侧。如果我使用overflow-x:visible，它会向右溢出，但随后整个页面会滚动。如果我给父级“overflow:hidden”，那么我将无法滚动滑块。

允许溢出-x：可见并允许同时使用滚动条滚动而不影响整个页面的最佳方法是什么？

HTML

<div id="main-container">
    <section class="container">
        <ul class="panels">
            <li class="panel"></li>
            <li class="panel"></li>
            <li class="panel"></li>
            <li class="panel"></li>
            <li class="panel"></li>
            <li class="panel"></li>
        </ul>
    </section>
</div>

CSS

#main-container {
   overflow: hidden;
}
.panels {
   overflow-x: visible;
   display: flex;
   height: auto;
   width: auto;
   list-style: none;
   margin: 0;
   padding: 0;
}

Answer 1

我创建这个是因为这是一个我自己不断重写的问题，所以这对你和我来说都是为了提醒它是如何工作的:)

水平滚动的“轮播”样式引导行，没有滚动条

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid overflow-scroll">
  <div class="container ">
    <div class="row flex-nowrap overflow-visible">
      <div class="col-4">
        <div class="bg-primary">asdfafd
        </div>
      </div>
      <div class="col-4 ">
        <div class="bg-light">asd
        </div>
      </div>
      <div class="col-4">
        <div class="bg-light">asdfa
        </div>
      </div>
      <div class="col-4">
        <div class="bg-light">asdfaf
        </div>
      </div>
    </div>
  </div>
</div>