I am trying to make a horizontal scrollable nav but when I assign a class to one element it causes to scroll parent element as well.

I found one question here on StackOverFllow but he implemented that using JavaScript event.

Can I make it work and scroll only the element I need to be scrallable horizontally and save the the layout and application's width?

I've already tried to assign overflow: hidden to other elements but it doesn't seem to work for me.

scss


  .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;
    }
  }

html


<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>

parent


.content-container {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row; 
    width: 90%;
    padding-top: 20px;

    .col-nav {
      position: absolute;
      top: $toolbarHeight + 5px;
      left: 0;
    }

    .col-products {
      flex: 12;
    }
  }

Any hints on that?

0 Answers