css - 可滚动的动态内容

Question

我正在使用 jquery 构建一个自定义灯箱，并且想知道当我需要滚动表单时该怎么做，因为这是一个响应式站点。在某些屏幕尺寸上，表单会在首屏下方增长，但是当我滚动页面时，它后面的网站会滚动。如何将重点放在新的动态内容上以实现可滚动性？

www.evoke.me

向下滚动页面后单击联系人按钮。

这是我正在使用的代码。

$('#contact').on( 'click', function(e){
        e.preventDefault();
        $('#modal').remove();
        $('body').append('<div id="modal"></div>');
        $("#modal").load('/forms/contact-form.html').hide().fadeIn(1000);
});

#modal{
    position:absolute;
    overflow:auto;
    top:0;
    z-index:5000;
    width:100%;
    height:100%;
    background:rgba(255, 255, 255, .95) url(../images/diag-pattern.png) repeat 0 0; 
}

Answer 1

问题不在于关注动态内容。问题是内容不可滚动，因为您使用了position: fixed没有overflow: auto. 要使联系表单可滚动，overflow: auto请将#modal.