Добавлен div не удалось прокрутить

В google chrome я добавляю div. Когда я нажимаю кнопку, красный div будет выдвигаться, но он не может прокручиваться с помощью колеса мыши.Добавлен div не удалось прокрутить

Ошибка происходит только в Google Chrome.

Это пример страницы: http://infinitynewtab.com/question/test.html

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

источник

2014-12-18 Sam Liu

на мыши перемещение прокрутки? –

Работает в Chrome 39.0.2171.95 – Turnip

Мой английский не очень хороший, я имею в виду, что он просто не может прокручиваться колесом мыши на красном div –

Если вы хотите, чтобы страница прокрутки не установлен высоту Див до 100%. Как вы реализовали это, вы можете прокручивать только после фокусировки div. это не ошибка ...

источник

2014-12-18 12:30:45 navotgil

Я хочу, чтобы красный div мог прокручиваться, я установил высоту div в 600 пикселей, но он все равно не может прокручиваться. Но он может прокручиваться, например: [ссылка] (http://infinitynewtab.com/question/test.html) –

Установите высоту на авто – navotgil

Извините, мой английский не очень хорошо, что я хочу сказать, страница не прокручивается, но содержимое в div может прокручиваться. –

Вы кот попробовать это может быть, это поможет

CSS добавить индекс г, как как этот

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

Живой Demo

источник

2014-12-18 13:18:54

Проблема в том с slideOut класс. Не знаю, почему. Но это работает:

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

источник

2014-12-18 14:01:54

Добавлен div не удалось прокрутить

ответ

Смежные вопросы