具有两个内容区域的横向网站

Question

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

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

对于第二个区域（页面加载时隐藏），我使用了更高的 z-index 和 98% 的左侧边距，以便只显示要单击的按钮。

在 jQuery 中，单击该按钮后会切换一个类，从而左边距从 98% 移动到 0，因此现在显示隐藏区域。

除了隐藏区域的高度比第一个高得多之外，所有这些都可以正常工作。我已将其设置为，当第一个内容区域可见时，正文溢出：隐藏，当第二个内容区域溢出时：可见。

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

我尝试在切换类之前和之后滚动顶部，但没有成功。

我确实尝试在 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;
}

对于您的情况，您可能只想用overflow: hidden 将正确的 div 包装在另一个 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);

希望对您有所帮助。