Question

在谷歌浏览器中，我附加了一个div。当我单击按钮时，红色div将滑出但不能用鼠标滚轮滚动。

错误只发生在谷歌浏览器。

这是一个示例页面：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>

Answer 1

你试试可能是它的帮助

CSS添加z索引就像这样

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

直播Demo

Answer 2

问题在于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;
    }

Answer 3

如果您希望页面滚动，请不要将div的高度设置为100％。您实现此方法的方法只能在聚焦div后滚动。这不是一个错误......

附加的div无法滚动

3 个答案: