Question

嗯，这个超出了我。我不擅长CSS，所以我无法“调试”这个。

我有这个SCSS

#container {
  .slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0;
    list-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
    li.scrolling {
      flex: 0 0 auto;
      min-width: 200px;
      min-height: 100px;
    }
  }
}

<div id="container">
  <ul class="slider">
    <li class="scrolling">
      <div class="something"></div>
    </li>
    <li class="scrolling">
      <div class="something2"></div>
    </li>
    <li class="scrolling">
      <div class="something3"></div>
    </li>
  </ul>
</div>

问题是，每个 li 基本上都是一个包含一些文本和一些链接的框，这样如果我点击一个链接，滚动滑块“神奇地”开始工作。否则，它只是不会滚动。使滚动工作的另一件事是进入开发人员工具，并干涉任何属性;在此之后，我可以滚动。就好像溢出被卡住一样，做任何这些技巧都会让它以某种方式解开。

我不知道为什么会这样。

Answer 1

不幸的是，不存在：scroll-direction: horizontal;

但是有一种方法可以使用滚轮存档水平滚动，而无需按下shift键。

我建议你看一下这篇文章，它很好地解释了这个问题： https://css-tricks.com/pure-css-horizontal-scrolling/

溢出-x的奇怪行为

1 个答案: