Angehängt div konnte nicht scrollen

In google chrome anhänge ich ein div. Wenn ich auf die Schaltfläche klicke, wird das rote div herausgeglitten, aber es kann nicht mit dem Mausrad geblättert werden. Der Fehler passiert nur in Google Chrome.Angehängt div konnte nicht scrollen

Dies ist ein Beispiel Seite: http://infinitynewtab.com/question/test.html

html, css und 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>

Quelle

2014-12-18 Sam Liu

auf Maus bewegen blättern? –

Funktioniert in Chrome 39.0.2171.95 – Turnip

Mein Englisch ist nicht sehr gut, ich meine es kann einfach nicht mit dem Mausrad auf dem roten div scrollen –

Wenn Sie die Seite blättern wollen nicht die div Höhe auf 100% gesetzt haben. Die Art, wie Sie dies implementiert haben, können Sie nur scrollen, nachdem Sie das div fokussiert haben. dies ist kein Fehler ...

Quelle

2014-12-18 12:30:45 navotgil

Ich möchte das rote div kann scrollen, habe ich die div-höhe auf 600px, aber es kann immer noch nicht scrollen.Aber es kann in ie blättern: [link] (http://infinitynewtab.com/question/test.html) –

Stellen Sie die Höhe auf Auto – navotgil

Sorry, mein Englisch ist nicht gut, was ich sagen möchte, ist die Seite nicht scrollen, aber der Inhalt in div kann blättern. –

Sie Katze versuchen es sein, kann es helfen, ist

CSS z-Index als ähnliche

#right{ 
z-index:2; 
} 
#button{ 
z-index:1; 
}

Live-Demo

Quelle

2014-12-18 13:18:54

Das Problem mit der slideOut ist hinzufügen Klasse. Nicht sicher warum. Aber das funktioniert:

.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; 
    }

Quelle

2014-12-18 14:01:54

Angehängt div konnte nicht scrollen

Antwort

Verwandte Themen