jquery - 水平滚动 - 页面小于屏幕尺寸

Question

我有 2 页并尝试水平滚动它们。但是页面宽度没有跨越。第 2 页可见。如何解决这个问题？

小提琴：http: //jsfiddle.net/x8WVe/

HTML：

<section class="section span12" id="section1">
        <header>
            <div class="main-header">
                <a href="#" alt="My Logo"><span class="get">My Logo</a>
            </div>
        </header>
        <div class="content-wrapper span10">
            <div class="sub-headline span8">
                <h2>sfdhgsafdhasgh</h2>
                <small>dshgfgdsjhgfgfjhdgsfdjgdf</small>
            </div>
            <div class="inner span8">
                <p>
                    ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf
                </p>
                <a href="#" class="btn" id="click" alt="click" aria-label="click" tab-index="-1">Click</a>
            </div>
            <a class="nav-slide next" href="#section2">&rsaquo;</a>
        </div>

    </section>

    <section class="section span12" id="section2">
        <header>
            <div class="main-header">
                <a href="#" alt="My Logo">My Logo</a>
            </div>
        </header>
        <div class="content-wrapper span10">
            <div class="sub-headline span8">
                <h2>sfdhgsafdhasgh</h2>
                <small>dshgfgdsjhgfgfjhdgsfdjgdf</small>
            </div>
            <div class="inner span8">
                <p>
                    ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>
                </p>
                <a href="#" class="btn" id="click" alt="click" aria-label="click" tab-index="-1">Click</a>
            </div>
            <a class="nav-slide prev" href="#section2">&lsaquo;</a>
        </div>
    </section>

CSS：

body{
    font-family:Georgia;
    font-size: 34px;
    font-style: italic;
    letter-spacing:-1px;
    width:12000px;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
}

/*Page Styles*/

/*header*/
header {
    background-color: #fdfdfd;
    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    border-bottom-color: transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 7%;
}


.section{
    margin:0px;
    bottom:0px;
    float:left;
    height:100%;
    text-shadow:1px 1px 2px #f0f0f0;
}
.section h2{
    margin:50px 0px 30px 50px;
}
.section p{
    margin:20px 0px 0px 50px;
    width:600px;
}



.section#section1 {
    background-color: #48a95e;
}
.section#section2{
    background-color: #C6FFC8;
}
.section ul{
    list-style:none;
    margin:20px 0px 0px 550px;
}
.content-wrapper {
    border: 1px solid red;
    position: relative;
    top: 20%;
    text-align: center;
}

/*Slide Nav Button*/
.nav-slide {
    position: relative;
    top: 13%;
    vertical-align: middle;
}

.prev {
    float: left;
}
.next {
    float: right;
}

JS：

$(function() {
                $('a.next').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
                $('a.prev').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });

Answer 1

您可以为 body 使用 200% 的相对宽度，以使其两倍于窗口大小，然后将每个部分设为 body 大小的一半：

body{
    width:200%;
}

.section{
    width: 50%;
}

Answer 2

现场演示
（只需填写内容即可）

JS：

var c = 0, winW = 0;

$('.btn').click(function(){ 
  winW = $(window).width();
  c = +$(this).hasClass('next'); // 1 , 0
  $('#overflowSections').stop().animate({scrollLeft: winW*c}, 2000); 
});

$(window).resize(function(){
  winW = $(this).width();
  $('#overflowSections').scrollLeft(winW*c);
});

基本 HTML：

<div id="overflowSections">

  <section id="section1">
     <div class="content">
      <h2>Title 2</h2>
      <p>Content 2...</p>
    </div>
    <div class="btn next">NEXT</div>
  </section>


  <section id="section2">   
    <div class="content">
      <h2>Title 2</h2>
      <p>Content 2...</p>
    </div>
    <div class="btn prev">PREV</div>
  </section>

</div>

CSS：

#overflowSections{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:100%;
  background:#000;
  white-space:nowrap;
  font-size:0; /* !! WARNING !! */
}

section{
  font-size:16px; /* !! RESET !! */
  position:relative;
  display:inline-block;
  width:100%;
  height:100%;
}
section .content{
  position:relative;
  width:600px;
  margin:50px auto;
}
#section1{
  background:#48A95E;
}
#section2{
  background:#C6FFC8;
}
.btn{
  cursor:pointer;
  position:absolute;
  bottom:10px;
  padding:20px 30px;
  background:#fff;
  opacity:0.7;
}
.next{
  right:0;
}

Answer 3

您的链接动画scrollLeft到$(this.href).offset().left. 这适用于第一个链接，但第二个链接已经滚动到它自己的位置。

为了解决这个问题，不要引用链接位置，而是引用每个部分的位置。

JS小提琴

$(function () {
    $('a.next').bind('click', function (event) {
        var $goNext = $(this).parents('section').next('section');
        $('html, body').stop().animate({
            scrollLeft: $goNext.offset().left
        }, 1000);
        event.preventDefault();
    });
    $('a.prev').bind('click', function (event) {
        var $goBack = $(this).parents('section').prev('section');
        $('html, body').stop().animate({
            scrollLeft: $goBack.offset().left
        }, 1000);
        event.preventDefault();
    });
});

编辑：结合到一个功能 -

$(function () {
    $('.nav-slide').bind('click', function (event) {
        var $goHere = ($(this).hasClass('next')) ? $(this).parents('section').next('section') : $(this).parents('section').prev('section');
        $('html, body').stop().animate({
            scrollLeft: $goHere.offset().left
        }, 1000);
        event.preventDefault();
    });
});

带有精简代码（和一些更正的 HTML）的新 Fiddle 。

Answer 4

如果您只想使用这两个.sections，您可以轻松地使用总宽度的一半：

.section{
    margin:0px;
    bottom:0px;
    float:left;
    height:100%;
    text-shadow:1px 1px 2px #f0f0f0;
    width: 50%;
}

jsFiddle

但是，当您想让它自动执行时，例如当您要添加超过 2 .sections 时，您可以使用 jQuery 执行此操作：

var width = $('body').outerWidth() / $('.section').length;

$('.section').css('width', width);

jsFiddle