javascript - 页面滚动，保持页面垂直，部分页面水平

Question

我正在尝试创建一个页面，其中整个页面在垂直方向上很长(超过 3000 像素)，并且页面的某些部分可以向右滚动到原始页面宽度之外。我一直在寻找答案，但我似乎无法让它正常工作。

基本上，页面设置为仅以 1024 像素的宽度查看。在页面的大约一半处，我希望它滚动所有 4000 像素的宽度并设置 768 像素的高度。一旦用户通过该部分，宽度就会恢复到原来的 1024 像素。简而言之，我就像一个丁字路口。

我只会使用 HTML、CSS、javascript 和 jQuery。

Answer 1

overflow CSS 属性使您可以将滚动条直接嵌入到 div 中。您可以通过扩大第二部分的内容并使用此属性来创建您的页面。

HTML:

<section>
    <div class="wider">
        <!--Your wider content-->
    </div>
</section>

CSS:

section{
    overflow-x: scroll;
    overflow-y: hidden;
}

.wider{
    width: 200%;
}

这是一个演示:http://jsfiddle.net/y42Dw/