CSS, floating unlimited scroll draw

user_2914534 0
Viewed 266

I would like to create a mobile friendly page which has:

  1. A background which the user can scroll up and down
  2. A foreground drawer that starts at the bottom of the page, that the user can pull up and continuously scroll over the top of the background.

The design

Note in the diagram below the user can scroll through the background but they can also drag the background up over the foreground.

I have tried several different solutions including: 1. Using position: fixed; to have the floating tray issues: touch events pass through to the background panel below

  1. Using flexbox with two boxes in the main content region and using javascript to alter the height of the second box.

Secondary Issue: If I manually control the scrolling behaviour of by changing px heights of the boxes I lose all of the native scrolling behaviour of the mobile browser (like acceleration / deceleration etc).

Here is my code for a test of the second solution.

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>

mobile css html javascript
0 Answers
Related