прокрутка, когда содержится в гибкой коробке - PullRequest
Новая
       15

прокрутка, когда содержится в гибкой коробке

0 голосов
/ 20 июня 2020

Я действительно изо всех сил пытаюсь заставить прокрутку работать так, как я хочу, внутри набора вложенных контейнеров flex box. Более того, я вижу странные побочные эффекты, которые для меня вообще не имеют смысла.

Фактический сайт, над которым я работаю, полон настраиваемых элементов, но для упрощения проблемы я создал тестовую страницу из обычные элементы (те, которые являются настраиваемыми элементами в реальном приложении, имеют добавленный к ним класс "custom"), и поэтому другие могут видеть, что я говорю об этой пробной странице, по адресу https://www.chandlerfamily.org.uk/trial.html

Здесь html 

  <body>
    <div class="main-app custom">
      <header class="main-header">Main Header Bar</header>
      <section class="main-section">
        <div class="page-manager custom">
          <div class="managed-page custom">
            <div class="page-template custom">
              <header class="secondary-header">Secondary Header</header>
              <section class="container">
                <div class="list-manager custom">
                  <header class="list-header">List Header</header>
                  <section class="list scrollable">
                    <div class="item">Item 1</div>
                    <div class="item">Item 2</div>
                    <div class="item">Item 3</div>
                    <div class="item">Item 4</div>
                    <div class="item">Item 5</div>
                    <div class="item">Item 6</div>
                    <div class="item">Item 7</div>
                    <div class="item">Item 8</div>
                    <div class="item">Item 9</div>
                    <div class="item">Item 10</div>
                    <div class="item">Item 11</div>
                    <div class="item">Item 12</div>
                    <div class="item">Item 13</div>
                  </section>
                </div>
              </section>
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>

Я пытаюсь сделать прокрутку внутреннего раздела, привязываясь к его элементам, когда они не помещаются на странице. Я хочу, чтобы полосы прокрутки находились во внутренней части, чтобы различные заголовки, которые ее окружают, отображались на месте. В конечном итоге я бы также хотел, чтобы section, помеченный классом "main-section", также был прокручиваемым - но только для прокрутки на этом уровне, ЕСЛИ нет прокручиваемого раздела нижнего уровня.

The css Я использование ниже. Единственная странность, которую мне, возможно, придется объяснить, - это использование column-reverse во флексе для main-app. Это потому, что окончательное приложение может быть на мобильном телефоне, поэтому (в зависимости от медиа-запросов) я помещаю заголовок рядом с большими пальцами. Это действительно оказывает странное влияние на результат: когда в инструментах Chrome dev я отключаю эту конкретную строку css и заголовок появляется наверху, вертикальная полоса прокрутки появляется на верхнем уровне, а как не вообще, когда это на месте. 

      html {
        background: #ffffff;
      }

      body {
        margin: 0;
        height:100vh;
        width:100vw;
        font-family: sans-serif;
        line-height: 1.5;
        letter-spacing: 0.1em;
        background-color: #fafafa;
        color: #333;
      }
      .custom {
        height:100%;
        display:flex;
        flex-direction: column;

      }
      .main-app {
        flex-direction: column-reverse ;
      }
      header {
        background-color: #42d9ff;
        flex: 0 1 64px;
        height:64px;
      }
      section {
        flex: 1 1 auto;
      }
      .scrollable {
        overflow-y: auto; 
        scroll-snap-type: y mandatory;
      }
      .item {
        height: 50px;
        scroll-snap-align:start;
        border-radius: 5px;
        box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.31);
        margin:0 5px 5px 3px;
      }
      .page-template {
        margin: 40px auto 40px auto;
        max-height: 100%;
        border-radius: 10px;
        box-shadow: 0px 0px 38px -2px rgba(0, 0, 0, 0.5);
        padding: 20px;
        min-width: 500px;
        box-sizing:border-box;
      }

Итак, помимо разговора о том, почему появляется полоса прокрутки, а не когда я меняю column-reverse на column и наоборот. У меня есть другие проблемы.

  1. почему панель основного заголовка не имеет высоту 64 пикселя, как другие, несмотря на то, что ей специально сказано, чтобы она была высотой 64 пикселя. Я не вижу разницы в определении.
  2. Почему вообще не должно быть полос прокрутки, несмотря на то, что в самом внутреннем разделе overflow-y: auto; еще нет другого элемента, отмеченного как прокручиваемый.
  3. Я могу найти нет упоминания о том, как браузер выбирает, к какому элементу добавить полосы прокрутки, кроме случаев, когда содержимое больше, чем его родительский элемент, а родительский элемент имеет переполнение: прокрутка или авто. Как он выбирает?
  4. Я получил полосы прокрутки на верхнем уровне из-за содержимого с переполнением: видимым, выходящим за пределы окна?

1 Ответ

0 голосов
/ 20 июня 2020

Эта проблема связана с section css

проблема в том, что flex-shrink означает, что с 1 это содержимое сжимается вместе со всем остальным. В результате он не переполняется и не заставляет полосы прокрутки. flex-shrink должен быть 0, что означает, что, когда содержимое не помещается внутри контейнера, оно не сжимается. Это вызывает появление полос прокрутки на родительском элементе.

Это изменение также касается того, что размер заголовка слишком маленький. Он тоже был вынужден сжаться. Опять же, решение состоит в том, чтобы установить коэффициент flex-shrink равным 0.

Я также думаю, что работая с этим изнутри, чтобы правильный уровень получил полосы прокрутки, потому что, как только он есть, его высота тогда подходит для его родителя. и так далее по иерархии.

Я также предполагаю, что полосы прокрутки на верхнем уровне появляются, если контент просто не помещается в окне и на уровне тела.

...