Geek Answers Handbook

Added div could not scroll

In google chrome, I add a div. When I click the button, the red div will be pulled out, but it cannot scroll with the mouse wheel.

The error occurs only in google chrome .

Here is a sample 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>
+7
javascript jquery google-chrome css3 web
source share
3 answers

You cat can try this

CSS add z index like this

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

Live Demo

+2
source share

The problem is the slideOut class. I do not know why. But it works:

 .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; }
+1
source share

If you want to scroll the page, do not set the div height to 100%. The way you did this, you can only scroll after focusing the div. it's not a mistake...

0
source share

More articles:


All Articles