gpt4 book ai didi

javascript - 附加的 div 无法滚动

转载 作者:数据小太阳 更新时间:2023-10-29 04:47:45 26 4
gpt4 key购买 nike

在谷歌浏览器中,我附加了一个 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;
}

直播Demo

关于javascript - 附加的 div 无法滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27546549/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com