Appended div couldn't scroll

2018-06-07 20:25:51

In google chrome I append a div. When I click the button the red div will slide out but it can't scroll with mouse wheel.

The bug only happens in google chrome .

This is an example page:http://infinitynewtab.com/question/test.html

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

You cat try it may be it's help

CSS add z index as like this

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

Live Demo

The problem is with the slideOut class. Not sure why. But this works:

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

If you want the page to scroll don't set the div's height to 100%. The way you implemented this you can scroll only after focusing the div. this is not a bug...

链接地址: http://www.djcxy.com/p/23914.html

上一篇: 关闭连接后不允许任何操作

下一篇: 附加的div不能滚动