页面滚动,保持页面垂直,而页面的某些部分是水平的

时间:2012-04-30 17:04:32

标签: javascript jquery html5 css3

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

基本上,页面设置为仅以1024像素的宽度进行查看。在页面的大约一半处,我希望它能够滚动所有宽度为4000像素,并且设置高度为768像素。一旦用户越过该部分,宽度就会回到原来的1024像素。简而言之,我就像一个T交叉点。

我只能使用HTML,CSS,javascript和jQuery。

1 个答案:

答案 0 :(得分:2)

溢出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/