The problem

Selector ::-webkit-scrollbar {display: none}

The horizontal scroll bar has been eliminated from the browser, it’s gone from Android, but it’s still there on ios

solution

Set a fixed height for the parent element, and set the overflow hidden, set the child element greater than the parent element height, the scrollbar out of the parent element range, so as to achieve the purpose of hiding the scrollbar. Therefore, the scrollbar of the child element is clipped out.Copy the code

Before processing

After processing

style

.list-floor {
      // margin: 15px 0;
      padding: 32px 0px 32px 47px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: #ffffff;
      overflow: hidden;
      height: 110px; // Height of the parent element.right-area {
        flex: 1;
        display: flex;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        height: 200px; &::-webkit-scrollbar {// display: none; // display: none; / /}}}Copy the code