Div được thêm vào không thể cuộn

Trong google chrome, tôi thêm một div. Khi tôi nhấp vào nút div màu đỏ sẽ trượt ra nhưng nó không thể di chuyển bằng bánh xe chuột.Div được thêm vào không thể cuộn

Lỗi chỉ xảy ra trong google chrome.

Đây là một trang ví dụ: http://infinitynewtab.com/question/test.html

html, css và 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>

Nguồn

2014-12-18 Sam Liu

trên di chuyển chuột? –

Hoạt động trong Chrome 39.0.2171.95 – Turnip

Tiếng Anh của tôi không tốt lắm, có nghĩa là không thể cuộn bằng bánh xe chuột trên div màu đỏ –

Nếu bạn muốn trang để di chuyển không đặt chiều cao của div đến 100%. Cách bạn triển khai thực hiện điều này, bạn chỉ có thể cuộn sau khi lấy nét div. đây không phải là một lỗi ...

Nguồn

2014-12-18 12:30:45 navotgil

Tôi muốn div màu đỏ có thể cuộn, tôi đặt chiều cao div thành 600px, nhưng nó vẫn không thể cuộn.Nhưng nó có thể cuộn trong ví dụ: [link] (http://infinitynewtab.com/question/test.html) –

Đặt chiều cao thành tự động – navotgil

Xin lỗi, tiếng Anh của tôi không tốt, điều tôi muốn nói là trang không cuộn, nhưng nội dung trong div có thể cuộn. –

Bạn mèo thử nó có thể là nó giúp

CSS thêm chỉ số z là như

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

Sống Demo

Nguồn

2014-12-18 13:18:54

này Vấn đề là với slideOut lớp học. Không chắc chắn lý do tại sao. Nhưng hoạt động này:

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

Nguồn

2014-12-18 14:01:54

Div được thêm vào không thể cuộn

Trả lời

Các vấn đề liên quan