Question

我将块宽度固定为100％，最小高度为100％但是当我在那里添加大图像（图像的高度超过1个屏幕）时，我无法滚动它有什么建议吗？

＆＃13;

$(document).ready(function() {
    for (var i = 0; i < 100; i++)
      $('body').append('123 TEST 123 <button onclick="$(\'#overlay\').show();">Open Preview</button><br />');   
    
    $('#overlay,.hidden-image').on('click', function() {
        $('#overlay').hide();
    });
});

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}

#overlay {
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    padding: 10%;
    display: none;
}

.hidden-image {
    width: 80%;
    text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='overlay'>
    <div class="hidden-image">
        <img src='http://s4.pikabu.ru/images/previews_comm/2014-10_5/14140625135057.png' />
    </div>
</div>

＆＃13;

Answer 1

如果你移除位置：固定;然后你可以滚动。如果它已修复，则滚动不起作用，因为您看到图像固定为窗口。

Answer 2

现在它有效！我是这样做的：

.hidden-image {
    position: absolute;
    overflow-y: scroll;
    width: 100%;
}

以下是示例：

＆＃13;

$(document).ready(function() {
    for (var i = 0; i < 100; i++)
      $('body').append('123 TEST 123 <button onclick="$(\'#overlay\').show();">Open Preview</button><br />');   
    
    $('#overlay,.hidden-image').on('click', function() {
        $('#overlay').hide();
    });
});

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}

#overlay {
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    padding-top: 5%;
    display: none;
}

.hidden-image {
    text-align: center;
    position: absolute;
    overflow-y: scroll;
    width: 100%;
    height: 80%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='overlay'>
    <div class="hidden-image">
        <img src='http://s4.pikabu.ru/images/previews_comm/2014-10_5/14140625135057.png' />
    </div>
</div>

＆＃13;

固定块内容很大

2 个答案: