手机端的一个项目，效果和汽车之家app里汽车详解的功能一样，在做的过程中遇到了弹出层的内容滚动到底部和顶部的时候，body的内容也会随之滚动，自己也是搞了好一会，最后才解决掉，办法是：
在弹出层弹出的时候给html和body都加样式 height：100%；overflow：hidden；很多人没有设置html的样式，所以导致不起作用！
项目的效果图如下图所示：
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/reset.css" />
<title>ul列表滑动</title>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
border: 0;
overflow-x: hidden;
}
html {
font-size: 20px;
height: 100%;
}
body {
padding-top: 2.25rem;
width: 100%;
height: 100%;
background: #FFFFFF;
font-family: "微软雅黑";
}
.hide {
overflow: hidden;
}
#returnBox {
text-align: center;
font-family: "微软雅黑";
font-size: 0.7rem;
height: 2.25rem;
line-height: 2.25rem;
width: 100%;
position: relative;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: #FFFFFF;
}
#returnBox a img {
width: 0.5rem;
height: 0.75rem;
cursor: pointer;
}
#returnBox a {
display: block;
position: absolute;
top: 50%;
margin-top: -0.375rem;
left: 0.95rem;
}
#xialaListBox {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: #FFFFFF;
font-family: "微软雅黑";
}
#xialaList {
width: 100%;
height: 2.25rem;
line-height: 2.25rem;
font-family: "微软雅黑";
font-size: 0.7rem;
position: relative;
border-top: 0.05rem #e9e9e9 solid;
border-bottom: 0.05rem #e9e9e9 solid;
}
#xialaList img {
width: 0.275rem;
height: 0.25rem;
position: absolute;
top: 50%;
margin-top: -0.125rem;
right: 0.95rem;
}
#xialaList span {
margin-left: 0.95rem;
}
.show {
color: #2c75f1;
}
#listBox {
width: 100%;
height: 20.25rem;
list-style: none;
overflow-y: scroll;
position: relative;
z-index: 10;
background: #FFFFFF;
}
#listBox li {
width: 100%;
height: 2.25rem;
line-height: 2.25rem;
text-align: center;
border-bottom: 0.05rem #e9e9e9 solid;
font-family: "微软雅黑";
font-size: 0.7rem;
color: #000000;
}
#listBox li:nth-child(1) {
color: #2c75f1;
}
.none {
display: none;
}
#listBox li:last-child {
border-bottom: none;
}
#content {
width: 100%;
}
</style>
<script>
function fn() {
document.documentElement.style.fontSize = document.documentElement.clientWidth * 20 / 375 + "px";
}
fn();
window.onresize = function() {
fn();
}
</script>
</head>
<body>
<div id="xialaListBox">
<!--下拉列表-->
<div id="xialaList" class="">
<span>1</span>
<img src="../img/Triangle.png" alt="" />
</div>
<ul id="listBox" class="none">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div id="content">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
function imgToggle() {
if($("#xialaList img").attr("src") == "../img/Upper_triangle.png") {
$("#xialaList img").attr("src", "../img/triangle.png");
} else {
$("#xialaList img").attr("src", "../img/Upper_triangle.png");
}
}
//顶部按钮点击事件
$("#xialaList").on("click", function() {
$("#listBox").toggleClass("none");
imgToggle();
$("#xialaList span").toggleClass("show");
if(!$("#listBox").hasClass("none")) {
$("body").css({
"height": "100%",
"overflow": "hidden"
});
$("html").css({
"height": "100%",
"overflow": "hidden"
});
} else {
$("body").css({
"height": "auto",
"overflow-y": "auto",
"overflow-x": "hidden"
});
$("html").css({
"height": "auto",
"overflow-y": "auto",
"overflow-x": "hidden"
});
}
});
//列表下的li点击事件
$("#listBox li").on("click", function() {
//$("body").scrollTop(0);
$("body").css({
"height": "auto",
"overflow-y": "auto",
"overflow-x": "hidden"
});
$("html").css({
"height": "auto",
"overflow-y": "auto",
"overflow-x": "hidden"
});
spanText = $(this).text();
listId = $(this).attr("id");
imgToggle();
$(this).parent().addClass("none");
$("#listBox li").css("color", "#000000");
$(this).css("color", "#2c75f1");
$("#xialaList span").removeClass("show");
$("#xialaList span").text(spanText);
//$("#content").empty(); //清空之前的数据
});
//点击内容让列表隐藏
$("#content").on("click", function() {
$("body").css({
"height": "auto",
"overflow-y": "auto",
"overflow-x": "hidden"
});
$("html").css({
"height": "auto",
"overflow-y": "auto",
"overflow-x": "hidden"
});
$("#xialaList img").attr("src", "../img/triangle.png");
$("#xialaList span").removeClass("show");
$("#listBox").addClass("none");
});
})
</script>
</body>
</html> 在网上看到一个很好的例子，大家可以参考一下：
https://uedsky.com/demo/modal-scroll.html