在谷歌浏览器中，我附加了一个 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>
最佳答案
关于javascript - 附加的 div 无法滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27546549/