Il div aggiunto non ha potuto scorrere

In google chrome Appendo un div. Quando faccio clic sul pulsante, il div rosso si estrae ma non può scorrere con la rotellina del mouse.Il div aggiunto non ha potuto scorrere

L'errore si verifica solo in google chrome.

Questa è una pagina di esempio: http://infinitynewtab.com/question/test.html

HTML, CSS e 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>

fonte

2014-12-18 Sam Liu

sul mouse muovi scorri? –

Works in Chrome 39.0.2171.95 – Turnip

Il mio inglese non è molto buono, voglio dire non basta scorrere la rotella del mouse sul div rosso –

Se si desidera che la pagina per scorrere non impostare l'altezza del div al 100%. Il modo in cui è stato implementato è possibile scorrere solo dopo aver messo a fuoco il div. questo non è un bug ...

fonte

2014-12-18 12:30:45 navotgil

Voglio che il div rosso possa scorrere, ho impostato l'altezza div a 600px, ma non può ancora scorrere. Ma può scorrere in alto cioè: [link] (http://infinitynewtab.com/question/test.html) –

Imposta l'altezza su auto – navotgil

Spiacente, il mio inglese non è buono, quello che voglio dire è che la pagina non scorre, ma il contenuto in div può scorrere. –

Si gatto provare può essere è aiutare

CSS aggiungere indice z come come questo

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

diretta Demo

fonte

2014-12-18 13:18:54

Il problema è con il slideOut classe. Non so perché. Ma questo funziona:

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

fonte

2014-12-18 14:01:54

Il div aggiunto non ha potuto scorrere

risposta

Problemi correlati