Question

我想制作一个水平滚动网站，#page1位于body左侧position:absolute; right:100%;

为什么我无法通过向左滚动来访问此“页面”。

在此 FIDDLE 上，您可以看到#page2可以滚动到#page1但不能<section id="home">Home</section> <section id="page1">Page 1</section> <section id="page2">Page 2</section>。

在页面加载时左侧显示此页面的解决方案是什么？

HTML：

html,body,section{
    width:100%;
    height:100%;
    margin:0;
}
section{
    position:absolute;
    top:0;
}
#page1{
    right:100%;
}
#page2{
    left:100%;
}

CSS：

{{1}}

Answer 1

这个问题有点令人困惑，所以我不确定这是不是你要追求的......但是要从左到右对齐这些元素，你可以使用以下内容：http://jsfiddle.net/NCe7W/4/

#page1{ left: 100%; }
#page2{ left: 200%; }

如果要更改元素的顺序，可以通过更改每个元素的左值来实现。类似于：http://jsfiddle.net/NCe7W/9/

#home { left: 100%; }
#page1{ left: 0; }
#page2{ left: 200%; }

Answer 2

我不知道最初加载已经在没有JavaScript的情况下滚动一半的页面的方法。听起来这就是你想要做的事情：加载“home”可见的页面，但允许向左滚动到“page1”或向右滚动到“page2”。

使用最少的JavaScript实现这一目标的一种相对简单的方法是：

在页面加载时将window.location.hash设置为家庭div的ID
将第1页设为left:0，将主页设为left:100%，将第2页设为left:200%。

这是jsfiddle link。

Answer 3

我可以重新排列您的代码，但我会坚持以当前状态回答您的问题。您可以将sections置于与当前相似的位置，然后使用2行轻量级JavaScript代码（不是jQuery库），然后将其置于所需页面的中心

DEMO http://jsfiddle.net/NCe7W/10/

var el = document.getElementById('home');
    el.scrollIntoView(true);

Answer 4

我会将body设置为width: 300%而将section设置为width: 33.33%并将section设置为{{1}}，而不是绝对定位这些设置。＆＃39;第请参阅此codepen演示http://codepen.io/the_ruther4d/pen/623a19f2e71a9ecb881400fe887c04f0/

滚动到身体左侧的div

4 个答案: