Горизонтальная прокрутка - страница меньше размера экрана

Question

У меня есть 2 страницы и вы можете прокручивать их по горизонтали. Но ширина страницы не распространяется. Страница 2 видна. Как это исправить?

Fiddle: 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

LIVE DEMO
(просто наполнить содержанием, и вы сделали)

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); 
}); 

BASIC 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 2

Вы можете использовать относительную ширину 200% тела для того, чтобы ке дважды размер окна, а затем сделать каждый раздел половину размера тела:

body{ 
    width:200%; 
} 

.section{ 
    width: 50%; 
} 

Answer 3

Ваши ссылки оживляющий scrollLeft на $(this.href).offset().left. Это работает нормально для первой ссылки, а вторая уже прокручивается в свою позицию.

Чтобы исправить это, не указывайте места ссылки, а вместо этого места каждого раздела.

JS Fiddle

$(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(); 
    }); 
}); 

EDIT: В сочетании с одной функцией -

$(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(); 
    }); 
}); 

New Fiddle со сгущенным кодом (и некоторые скорректированного HTML).

Answer 4

Если вы хотите использовать только эти два .section S можно easially использовать половину общей ширины:

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

jsFiddle

Однако, если вы хотите, чтобы это сделать автоматически, для пример, когда вы добавите более 2 .section с, вы можете сделать это с помощью jQuery:

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

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

jsFiddle