Question

我试图制作一个水平可滚动导航，但是当我将一个类分配给一个元素时，它也会导致滚动父元素。

我在StackOverFllow上发现了一个问题，但他使用JavaScript事件实现了该问题。

我可以使其工作并且仅滚动需要水平拼写的元素并保存布局和应用程序的宽度吗？

我已经尝试分配溢出：隐藏到其他元素，但似乎对我不起作用。

scss

like

html


  .scroll-horizontal {

    // Scrolling
    white-space: nowrap; /* [1] */
    overflow-x: auto; /* [2] */
    -webkit-overflow-scrolling: touch; /* [3] */
    -ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .side-menu {

    display: flex;
    flex-direction: row;

    li {
      padding: 0 5px;
    }
  }

父母


<ul class="side-menu scroll-horizontal">
  <li *ngFor=" let nav of navList  ">
    <a (click)="filterByCategory( navItem )" #navItem routerLink='/store/{{nav.value}}'>{{ nav.displayValue }}</a>
  </li>
</ul>

有任何暗示吗？

为什么分配给一个特定元素的overflow-x会使其他元素也滚动？

0 个答案: