附加的div不能滚动
在谷歌浏览器中，我附加了一个div。 当我点击按钮时，红色的div会滑出，但不能用鼠标滚轮滚动。
该错误只发生在谷歌浏览器中 。
这是一个示例页面：http：//infinitynewtab.com/question/test.html
HTML，CSS和JS：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
overflow: hidden;
}
#right{
width:350px;
height:100%;
position: absolute;
top:0px;
right:-350px;
background-color: red;
overflow-y:scroll;
}
#button{
width:180px;
height:40px;
padding: 5px;
background-color:rgb(75, 197, 142);
margin-top: 200px;
margin-left: auto;
margin-right: auto;
color:#fdfdfd;
border-radius: 10px;
cursor: pointer;
}
@-webkit-keyframes slideOut{
0% {
transform:translate(0px);
-webkit-transform:translate(0px);
}
100% {
transform:translate(-350px);
-webkit-transform:translate(-350px);
}
}
.slideOut{
animation:slideOut ease 0.3s;
-webkit-animation:slideOut ease 0.3s;
transform:translate(-350px);
-webkit-transform:translate(-350px);
}
</style>
</head>
<body>
<div id="button">Click me,then scroll in the red area</div>
<script src="jquery2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str='';
for (var i = 0; i <10000; i++) {
str+=i+'<br>';
};
$('body').append('<div id="right">'+str+'</div>');
});
$("#button").on('click',function(event) {
/* Act on the event */
$('#right').addClass('slideOut');
});
</script>
</body>
</html>
你试试看，可能是它的帮助
CSS像这样添加z索引
#right{
z-index:2;
}
#button{
z-index:1;
}
现场演示
问题在于slideOut类。 不知道为什么。 但是这工作：
.slideOut{
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
right: 0 !important;
}
如果你想让页面滚动，请不要将div的高度设置为100％。 你实现这个的方式只能在聚焦div之后才能滚动。 这不是一个错误...
链接地址: http://www.djcxy.com/p/23913.html