dans Google Chrome, j'appuie un div. Lorsque je clique sur le bouton, le rouge div glisse, mais il ne peut pas faire défiler avec la molette de la souris.
Le bug ne se produit que dans Google Chrome STRUT>. P> Ceci est un exemple Page: http://infinitynewtab.com/question/test.html p> HTML, CSS et JS: P> <!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>
3 Réponses :
Si vous souhaitez que la page défile, ne définissez pas la hauteur de la DIV à 100%. La façon dont vous avez implémentées cela, vous pouvez faire défiler seulement après avoir concentré la div. Ce n'est pas un bogue ...
Je veux que le rouge div puisse faire défiler, je définissais la hauteur div sur 600px, mais elle ne peut toujours pas faire défiler. Mais il peut faire défiler IE: lien
Définir la hauteur sur Auto
Désolé, mon anglais n'est pas bon, ce que je veux dire, la page ne fait pas défiler, mais le contenu de div peut défiler.
Peut être un bug ... Si vous redimensionnez la fenêtre, la DIV défilera. Une solution de contournement pourrait être d'obtenir chrome pour le redéfinir. Peut-être essayer de me concentrer () ou de modifier un attribut CSS
Merci, je vais essayer votre suggestion
vous chat essayer, il peut s'agir de l'aide
CSS Ajouter z index comme celle-ci live démo
Le problème est avec la classe code> glace code>. Pas certain de pourquoi. Mais cela fonctionne:
.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;
}
sur la souris déplace le défilement?
Travaille dans le chrome 39.0.2171.95
Mon anglais n'est pas très bon, je veux dire qu'il ne peut tout simplement pas faire défiler par la molette de la souris sur le rouge div
Sélectionnez / Sélectionnez Textes pour faire défiler?