防止固定元素在智能手机上移动
Posted
技术标签:
【中文标题】防止固定元素在智能手机上移动【英文标题】：prevent fixed element from moving on smartphone 【发布时间】：2020-04-26 18:41:18 【问题描述】：我有以下 sn-p 工作，除非您滚动到#section-container 的底部，顶部的固定元素会移动。如何防止这种情况发生在智能手机上？
html
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: orange;
body
margin: 0;
padding: 0;
height: 100%;
width: 100%;
#container
position: -webkit-sticky;
position:sticky;
height: 80%;
width: 100%;
top: 20%;
background-color: purple;
#fixed
position: -webkit-sticky;
position:sticky;
top: 0;
height: 20%;
width: 100%;
background-color: lightblue;
#section-container
height: 100%;
overflow: scroll;
.sections
height: 100%;
#section1,
#section3
background-color: blue;
#section2
background-color: red;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>scroll</title>
</head>
<body>
<div id='fixed'>
</div>
<div id='container'>
<div id='section-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
移除位置：固定；和顶部：0；从你的 CSS 的 html 和 body 部分开始 没有区别 它会在您将浅蓝色部分更改为 position:sticky 而不是 fixed 时（此外。无论如何，您的 body 和 html 将始终从顶部开始，并且绝对定位在响应式设计中永远不会起作用。位置应该只应用于正文中的元素 @Rachel Gallen 感谢您抽出宝贵时间回答，但您的建议并没有真正帮助。如果您首先测试您的建议以确保它们有效，将会有所帮助。 这是 Safari 特有的吗？ 【参考方案1】：我找到了一个名为 bodyScrollLock 的 js 库，它可以工作。做这么简单的事情似乎需要很多开销。有没有人有更原生的解决方案？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" >
<title>scroll</title>
<script src="https://www.sustainablewestonma.org/swag/public/js/bodyScrollLock.min.js?test0=xxx"></script>
<style>
html
margin:0;
padding:0;
height:100%;
width:100%;
background-color:orange;
body
margin:0;
padding:0;
height:100%;
width:100%;
#container
position: -webkit-sticky;
position:sticky;
height:80%;
width:100%;
top:20%;
background-color:purple;
#fixed
position: -webkit-sticky;
position:sticky;
top:0;
height:20%;
width:100%;
background-color:lightblue;
#section-container
height:100%;
overflow:scroll;
.sections
height:100%;
#section1,#section3
background-color:blue;
#section2
background-color:red;
</style>
</head>
<body id='myBody'>
<div id='fixed'>
</div>
<div id='container'>
<div id='section-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
<script>
const scrollElement = document.getElementById('section-container');
bodyScrollLock.disableBodyScroll(scrollElement);
</script>
</body>
</html>【讨论】：
以上是关于防止固定元素在智能手机上移动的主要内容，如果未能解决你的问题，请参考以下文章
手机控车OBD-移动管家手机控车方案基于Android手机智能控制汽车系统的研究与实现；