您现在的位置是:首页 > Javascript
当前栏目
H5 页面布局 - 滚动条限制
2023-04-18 14:45:09 时间
描述:当一个H5页面有头部与尾部的时候,在滑动页面的时候,滚动条会盖在上面,覆盖页面上的所有元素,不大美观,如何做到跟真机一样的效果,直接在指定区域呢?如下图所示进度条区域:
<template>
<div class="Index">
<header>标题</header>
<section class="content">
<router-link to="/index2">
<button>下一步</button>
</router-link>
<div v-for="v in 200" :key="v">Test {{v}}</div>
</section>
<footer class="footer">
<div>提交</div>
</footer>
</div>
</template>
<style lang="less" scoped>
.Index {
display: block;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: auto;
left: 0;
right: 0;
margin: 0 auto;
header {
height: 50px;
display: flex;
border-bottom: 1px solid whitesmoke;
text-align: center;
font-size: 20px;
font-weight: 500;
line-height: 50px;
display: block;
color: #000000;
}
.content {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
footer {
display: block;
text-align: center;
border-top: 1px solid whitesmoke;
padding: 7px 0;
div {
width: 90%;
border-radius: 50px;
background: green;
margin: 0 auto;
height: 40px;
line-height: 40px;
color: rgba(255, 255, 255, 1);
background-color: rgba(57, 122, 255, 1);
box-shadow: 0px 2px 7px 0px rgba(255, 255, 255, 1);
}
}
}
</style>
相关文章
- VFP为公众号添加一个报名功能,代码不多,但谁能得扬名立万
- JSON与XML你不懂就OUT,真相是它们都是字符串
- 手把手教你JS逆向搞定字体反爬并获取某招聘网站信息
- 画一手好的架构图是码农进阶的开始
- 网站运营还是盗版罪犯?这个男人被判欠任天堂1450万美元,服刑3年后打工慢慢还
- J2EE之普通类载入web资源文件的方法
- 你在元宇宙“吃鸡”,我在Web3.0投机,我们都有光明的未来
- 为了生成唯一id,React18专门引入了新Hook:useId
- JS中所有对象隐式转换都是true?除了他...
- 用几行原生JS就可以实现丝滑的元素过渡效果!
- 使用 Rust 编写更快的 React 组件
- 六种方式,教你在SpringBoot初始化时搞点事情!
- C++使用Nginx搭建WEB程序
- Node.js 2021年开发者报告解读:健康稳步的发展中
- 因为没有这个按钮,谷歌、脸书被罚15亿,限期三个月改正
- 探索 ebpf 在 Node.js 中的应用
- 这30个超级工具!前端开发很喜欢
- 中文域名对建设网站有什么影响?中文域名有什么优点?
- MyBatis 整合spring boot
- 《手把手教你》系列技巧篇(四十五)-java+ selenium自动化测试-web页面定位toast-上篇(详解教程)