【问题标题】:Scrollable dynamic content [closed]可滚动的动态内容[关闭]
【发布时间】:2013-08-14 03:39:54
【问题描述】:

我正在使用 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; 
}

【问题讨论】:

  • 您的代码到底在哪里遇到了困难?请不要发布链接并说“我该怎么做?
  • 天啊...没想到我需要展示代码...

标签: css responsive-design


【解决方案1】:

问题在于没有关注动态内容。问题是内容不可滚动,因为您使用了position: fixed 而没有overflow: auto。要使联系表单可滚动,请将 overflow: auto 添加到您的 CSS 中以获取 #modal

【讨论】:

  • 这很有帮助。现在我得到两个滚动条。是否可以像典型的灯箱一样只维护一个?也许这更适合聊天会议。
  • @user980988 - 当模态框可见时,将overflow: hidden 设置为body
猜你喜欢
  • 2015-08-13
  • 1970-01-01
  • 2016-12-24
  • 1970-01-01
  • 2015-06-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多