Dołączony element div nie może przewinąć

W google chrome dołączam element div. Kiedy kliknę przycisk, czerwony element div wysunie się, ale nie będzie można go przewijać kółkiem myszy.Dołączony element div nie może przewinąć

Błąd pojawia się tylko w Google Chrome.

To jest przykładowa strona: http://infinitynewtab.com/question/test.html

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

Źródło

2014-12-18 Sam Liu

na przewijanie myszą? –

Działa w Chrome 39.0.2171.95 – Turnip

Mój angielski nie jest zbyt dobry, mam na myśli, że po prostu nie może przewijać kółka myszy na czerwonym pasku. –

Jeśli chcesz, aby przewinąć stronę nie ustawić wysokość div do 100%. Sposób w jaki to zaimplementowałeś, możesz przewijać tylko po ustawieniu pola div. To nie jest błąd ...

Źródło

2014-12-18 12:30:45 navotgil

Chcę, aby czerwony div mógł przewijać, ustawiam wysokość div na 600px, ale nadal nie mogę przewijać. Ale może przewijać np: [link] (http://infinitynewtab.com/question/test.html) –

Ustawia wysokość na automatyczną – navotgil

Niestety, mój angielski nie jest dobry, chcę powiedzieć, że strona nie jest przewijana, ale treść w dziale div może zostać przewinięta. –

Ty kot spróbować może się okazać, że to pomoże

CSS dodać oo indeks jak się ten

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

żywo Demo

Źródło

2014-12-18 13:18:54

Problem jest z slideOut klasa. Nie pewny dlaczego. Ale to działa:

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

Źródło

2014-12-18 14:01:54

Dołączony element div nie może przewinąć

Odpowiedz

Powiązane problemy