javascript - CSS,浮动无限滚动绘制
问题描述
我想创建一个适合移动设备的页面,其中包含:
- 用户可以上下滚动的背景
- 从页面底部开始的前景抽屉,用户可以拉起并在背景顶部连续滚动。
请注意,在下图中,用户可以滚动浏览背景,但也可以将背景向上拖动到前景上方。
我尝试了几种不同的解决方案,包括: 1. 使用位置:固定;有浮动托盘问题:触摸事件传递到下面的背景面板
- 在主要内容区域中使用带有两个框的 flexbox,并使用 javascript 更改第二个框的高度。
次要问题:如果我通过更改框的 px 高度手动控制滚动行为,我将失去移动浏览器的所有本机滚动行为(如加速/减速等)。
这是我测试第二种解决方案的代码。
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>
解决方案
推荐阅读
- vue.js - 如何通过 HTTPS 为 Vue 应用程序提供本地开发服务
- javascript - 为什么在promise的异步函数中有while循环时JS会停止执行主线程?
- javascript - 如何使用 jquery 访问全局对象中的 ajax 响应数据?
- python - Django Rest Framework - 每个实例的最新子
- java - 根据相同的Id对arraylist中的数据进行分组
- python - TPU 卡在 Google Colab 中
- reactjs - 当我将鼠标悬停在父级时,如何在 jss 中选择子元素
- python - 具有多个分隔符的python正则表达式
- excel - 为什么我会收到错误消息“运行时错误'91'”abd 我该如何解决这个问题?
- angular - 使用 NGRX 选择器时如何避免在页面刷新时获得“未定义的属性 X”