Menu
In google chrome I append a div. When I click the button the red div will slide out but it can't scroll with mouse wheel.
The bug only happens in google chrome.
This is an example page:http://infinitynewtab.com/question/test.html
html, css and 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>
800
You cat try it may be it's help
CSS add z index as like this
#right{
z-index:2;
}
#button{
z-index:1;
}
Live Demo
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
