Jquery 水平滚动-页面小于屏幕大小

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

小提琴：

HTML:

JS:

---

您可以将主体的相对宽度设置为200%，使其成为窗口大小的两倍，然后使每个部分都成为主体大小的一半：

body{
    width:200%;
}

.section{
    width: 50%;
}

---

您的链接正在动画化

向左滚动
到
$（this.href）.offset（）.left
。对于第一个链接，这是正常的，但是第二个链接已经被滚动到它自己的位置

要解决此问题，请不要参考链接位置，而是参考每个部分的位置


编辑：组合到一个函数-

$(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）。
如果您只想使用这两个
。部分
可以轻松使用总宽度的一半：

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


但是，当您希望自动执行此操作时，例如，当您将添加2个以上的
。部分
s时，您可以使用jQuery执行此操作：

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

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



（只需填写内容，您就完成了）

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

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

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

基本HTML:

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

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

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

您是否试图强制每个页面填充屏幕而不考虑宽度？是。页面应该填满屏幕谢谢。当我把它添加到一个新的html页面时，我有一个问题，在加载时，我没有看到屏幕上的“下一步”按钮。我得笑着看。单击“Prev”后，它就可以正常工作。@dragonfly可能在页面加载时需要重置scrollLeft
$（“#overflowSections”）。否则，scrollLeft（0）
可能会被浏览器记住。
#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;
}