CSS, плавающая неограниченная прокрутка - PullRequest
Новая
       5

CSS, плавающая неограниченная прокрутка

0 голосов
/ 19 сентября 2018

Я хотел бы создать мобильную дружественную страницу, которая имеет:

  1. Фон, который пользователь может прокручивать вверх и вниз
  2. Ящик переднего плана, который начинается в нижней частистраницы, которую пользователь может тянуть вверх и непрерывно прокручивать поверх фона.

The design

Примечание на диаграмме ниже пользователь можетпрокручивайте фон, но они также могут перетаскивать фон над передним планом.

Я пробовал несколько различных решений, включая: 1. Использование позиции: исправлено;чтобы иметь проблемы с плавающим лотком: сенсорные события проходят на фоновую панель ниже

Использование flexbox с двумя полями в основной области содержимого и использование javascript для изменения высоты второго поля.

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

Вот мой код для тестирования второго решения. 

html,
body {
  height: 100%;
  overflow: hidden;
}

#outside-container {
  border: 1px black solid;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dynamic-box {
  border: 10px red solid;
  font-size: 50px;
  color: yellow;
  overflow: scroll;
}

.fixed-size-box {
  border: 10px black solid;
  font-size: 50px;
  overflow: hidden;
  color: orange;
  flex: 0 0 400px;
  /*that's the flex-bais index */
}

.boxes {
  display: flex;
  justify-content: space-around;
}

.boxes div {
  width: 30px;
  height: 30px;
  margin: 30px;
  border: 1px solid black;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div id="outside-container">
    <div class="dynamic-box">
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

    <div class="fixed-size-box">
      <div> Hello this is floating above</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>END OF CONTENT</div>
    </div>
  </div>
</body>

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

Нет похожих вопросов

...