我正在创建一个有两个不同区域的站点。我的想法是单击一个按钮,第二个内容区域在第一个内容区域中滑动。
两个区域均设置为100%宽度,并且绝对放置以占据整个窗口宽度。
对于第二个区域(隐藏在页面加载中),我使用较高的z-index和左边距为98%,以便仅显示要单击的按钮。
在jQuery中,单击该按钮时会切换一个类,从而使左边距从98%变为0,因此现在改为显示隐藏区域。
一切正常,除了隐藏区域的高度比第一个区域高得多。我已经对其进行了设置,以便当第一个内容区域可见时,主体具有overflow:hidden,而第二个区域则overflow:visible。
问题是,如果我向下滚动第二个区域,然后单击以滑回第一个区域,则第一个区域将发生溢出:隐藏但没有从顶部显示。
在切换类之前和之后,我都没有尝试成功滚动scrollTop。
我确实尝试在jsfiddle中复制它,但是由于它是视口的100%,很难显示,对不起,太冗长了!附件是一个简单的屏幕截图。
如果有人有什么好主意,谢谢!
最佳答案
在此处查看此页面: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);
希望能有所帮助。
关于jquery - 具有两个内容区域的横向网站,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16015784/