横向网站有两个内容区域

Question

我正在创建一个有两个不同区域的网站。我的想法是单击一个按钮，第二个内容区域滑入第一个内容。

两个区域都设置为100％宽度，并且绝对定位以占据整个窗口宽度。

对于第二个区域（在页面加载时隐藏）我使用更高的z-index和98％的margin-left，以便只显示要点击的按钮。

在jQuery中点击该按钮后，一个类被切换，其中margin-left从98％移动到0，所以现在显示隐藏区域。

一切正常，只是隐藏区域的高度比第一个高得多。我已经设置好了，当第一个内容区域可见时，主体有溢出：隐藏，当第二个溢出时：溢出：可见。

问题在于，如果我向下滚动第二个区域然后单击以向后滑动到第一个区域，则第一个区域将出现溢出：隐藏但不从顶部显示。

在课程切换之前和之后，我尝试过scrollTop但没有成功。

我确实尝试在jsfiddle中复制它，但因为它是100％的视口，所以很难显示，我很抱歉过于冗长！附件是一个简单的截图。

如果有人有任何想法会很棒，谢谢！

Answer 1

点击此页面：cargocollective.com/nonfeed

看起来你需要的是滚动右边的div而不实际滚动整个页面。在此设计示例中，每个垂直滚动部分有三个div，如下所示：

div.entry {
  overflow: hidden;
}
div.entry div.wrapper {
  overflow-x: hidden;
  overflow-y: auto;
}
div.entry div.wrapper div.content {
  overflow: hidden;
}

根据您的情况，您可能希望将正确的div用overflow: hidden包装在另一个div中，然后使用jQuery函数将div的高度设置为页面的高度。

这是设置窗口高度的一些jQuery代码：

var height_change_callback = function() {
var bodyheight = jQuery(window).height();
jQuery(".wrapper").each(function() {
        jQuery(this).css("height", bodyheight-80);
    });
}
jQuery(document).ready(height_change_callback);
// for the window resize
jQuery(window).resize(height_change_callback);

希望有所帮助。