Html 滚动至主体左侧的div

我想制作一个水平滚动的网站，将

#page1

定位在

正文的左侧

位置：绝对；右：100%

为什么我不能通过向左滚动来访问此“页面”

在此上，您可以看到

#page2

可以滚动到，但不能滚动到

#page1

在页面加载时将此页面置于左侧的解决方案是什么

HTML:

<section id="home">Home</section>
<section id="page1">Page 1</section>
<section id="page2">Page 2</section>

---

这个问题有点让人困惑，所以我不确定这是否是你想要的。。。但要从左到右对齐这些元素，可以使用以下命令：

如果要改变元素的顺序，可以通过改变每个元素的左值来实现。比如：

---

这个问题有点让人困惑，所以我不确定这是否是你想要的。。。但要从左到右对齐这些元素，可以使用以下命令：

如果要改变元素的顺序，可以通过改变每个元素的左值来实现。比如：

---

我将

主体设置为
宽度：300%
，
部分设置为
宽度：33.33%
，并浮动
部分。看到这个codepen演示
而不是绝对定位它们，我将
主体设置为
宽度：300%
，
部分设置为
宽度：33.33%
，并浮动
部分。看到这个codepen演示
我不知道如何在没有JavaScript的情况下开始加载已经滚动了一半的页面。听起来这就是您想要做的：加载页面时“主页”可见，但允许向左滚动到“page1”或向右滚动到“page2”

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

将
window.location.hash
设置为页面加载时主div的ID
将第1页设置为
左：0
，将主页设置为
左：100%
，将第2页设置为
左：200%
这里有一个。
我不知道如何在没有JavaScript的情况下加载已经滚动了一半的页面。听起来这就是您想要做的：加载页面时“主页”可见，但允许向左滚动到“page1”或向右滚动到“page2”

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

将
window.location.hash
设置为页面加载时主div的ID
将第1页设置为
左：0
，将主页设置为
左：100%
，将第2页设置为
左：200%
这里有一个问题。
我可以重新安排您的代码，但我将坚持在当前状态下回答您的问题。您可以将您的
部分定位为与当前类似的位置，然后使用两行轻量级javascript代码（不是jQuery库）将其居中放置到所需页面

演示

我可以重新安排你的代码，但我会坚持在当前状态下回答你的问题。您可以将您的
部分定位为与当前类似的位置，然后使用两行轻量级javascript代码（不是jQuery库）将其居中放置到所需页面

演示

现在，主页正在覆盖第1页。请参阅斯图尔特·克肖的答案，了解一个有效的实现。@TylerH好吧，当我使用chrome dv工具进行检查时，我可以看到主页左侧的第1页；第1页在主页的左边（正如他所希望的那样），无法滚动到。你可以看到这个。现在，主页覆盖了第一页。请参阅斯图尔特·克肖的答案，了解一个有效的实现。@TylerH好吧，当我使用chrome dv工具进行检查时，我可以看到主页左侧的第1页；第1页在主页的左边（正如他所希望的那样），无法滚动到。您可以通过以下方式看到这一点。我的目标是将
#page1
放在
#home
的左侧。好的，在这种情况下，您可以对元素进行重新排序，使
#page1
位于
#home
的左侧，并使用样式/CSS。更新了我上面的答案，这里的新提琴：-这不需要JS。我的目标是将
#page1
放在
#home
的左侧。好的，在这种情况下，您可以对元素进行重新排序，以便
#page1
在
#home
的左侧使用样式/CSS。更新了我的以上答案，这里的新提琴：-这不需要JS。是的，我也喜欢这个解决方案，但是为什么当它位于身体左侧时，就不能访问
#page1
？我不知道这个问题的“官方”答案（其他人可能可以链接到某个地方的规范），但是如果可以访问，这会造成这样一种情况，页面需要从一半开始滚动，或者开始一直向左滚动，在这种情况下，主体的“左”将不会真正从它可以预测的地方开始（在左边）。在大多数情况下，这两种情况都显得奇怪和不可取。。。因此，也许某个地方的某个人决定忽略位于左侧的东西。：-）是的，我也喜欢这个解决方案，但是为什么当它位于身体左侧时，就不能访问
#page1
？我不知道这个问题的“官方”答案（其他人可能可以链接到某个地方的规范），但是如果可以访问，这会造成这样一种情况，页面需要从一半开始滚动，或者开始一直向左滚动，在这种情况下，主体的“左”将不会真正从它可以预测的地方开始（在左边）。在大多数情况下，这两种情况都显得奇怪和不可取。。。因此，也许某个地方的某个人决定忽略位于左侧的东西。：-）
html,body,section{
    width:100%;
    height:100%;
    margin:0;
}
section{
    position:absolute;
    top:0;
}
#page1{
    right:100%;
}
#page2{
    left:100%;
}

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

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

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