javascript – 附加的div无法滚动

在谷歌浏览器我附加一个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>

解决方法

你试试看它可能是它的帮助

CSS添加z索引就像这样

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

直播Demo

原文链接：https://www.f2er.com/js/156685.html

javascript – 附加的div无法滚动

解决方法

猜你在找的JavaScript相关文章