Скрыть горизонтальную полосу прокрутки, когда высота содержимого неизвестна - PullRequest
0 голосов
/ 30 апреля 2018

В настоящее время я сталкиваюсь с проблемой отключения кросс-браузера горизонтальной полосы прокрутки. Проблема в том, что весь параметр встроен в гибкую среду дисплея, и я не знаю фактической (фиксированной) высоты содержимого, потому что оно динамическое.

Мой текущий код выглядит следующим образом:

<div class="some-parent">
  <div class="wrapper-outer">
    <div class="wrapper-inner">
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
  </div>
</div>

С соответствующим CSS:

.some-parent{
    width: 100px;
    position: relative;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
}

.wrapper-outer{
  width: 100%;
  overflow: hidden;
}

.wrapper-inner{
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
}

.wrapper-inner:after{
  content: '';
  display: block;
  height: 20px;
  height: 100%;
}

.content{
  border: 1px solid black;
  padding: 10px;
}

Как я уже сказал, фактическая высота элемента .content неизвестна.

Есть ли способ отключить кросс-браузер с горизонтальной полосой прокрутки? Мой текущий подход до сих пор всегда заключался в том, чтобы установить высоту .wrapper-inner 20px выше, чем высота .wrapper-outer с overflow: hidden, но в этом случае, к сожалению, это не работает.

Вот соответствующий JSFiddle

Edit1: Содержание по-прежнему должно прокручиваться.

1 Ответ

0 голосов
/ 30 апреля 2018

Горизонтальная прокрутка была включена в классе .wraper-inner, вы просто должны отключить ее.

.wrapper-inner{
overflow-x: hidden;
}

Ссылка на обновление Скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...