响应水平页面滑动

我想创build水平响应页面导航，如下图所示：

这是我设法做的： DEMO

$(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * slideNum, slideWidth = 100/slideNum; $('.wrapper').width(wrapperWidth + '%'); $('.page').width(slideWidth + '%'); $('a.scrollitem').click(function(){ $('a.scrollitem').removeClass('selected'); $(this).addClass('selected'); var slideNumber = $($(this).attr('href')).index('.page'), margin = slideNumber * -100 + '%'; $('.wrapper').animate({marginLeft: margin},1000); return false; }); }); 

 html, body { height: 100%; margin: 0; overflow-x:hidden; position:relative; } nav{ position:absolute; top:0; left:0; height:30px; } .wrapper { height: 100%; background: #263729; } .page { float:left; background: #992213; min-height: 100%; padding-top: 30px; } #page-1 { background: #0C717A; } #page-2 { background: #009900; } #page-3 { background: #0000FF; } a { color:#FFF; } a.selected{ color: red; } .simulate{ height:2000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="wrapper"> <nav> <a href="#page-1" class="scrollitem selected">page 1</a> <a href="#page-2" class="scrollitem">page 2</a> <a href="#page-3" class="scrollitem">page 3</a> </nav> <div id="page-1" class="page"> <h3>page 1</h3> <div class="simulate">Simulated content heigher than 100%</div> </div> <div id="page-2" class="page"> <h3>page 2</h3> <div class="simulate">Simulated content heigher than 100%</div> </div> <div id="page-3" class="page"> <h3>page 3</h3> <div class="simulate">Simulated content heigher than 100%</div> </div> </div> 

然而，我却遇到了一些砖墙，因为我的反应有一定的程度，就像你缩放它需要坚持页面而不露出其他页面一样。

另外，如果页面很长，则会显示一个完美的滚动条，但是在最后一张幻灯片中，与滚动条之间的间隙很大。

我有以下要求：

1. 需要响应
2. 页面需要能够很长（800px），并且仍然可以滚动，没有最后一页的空白。
3. 需要工作至lessie9

Answer 1

水平页面滑动

左边缘animation

这jQuery片段：

1. 计算幻灯片的数量并相应地设置包装的宽度。
2. 根据哪个链接被点击， left-marginanimation的包装，以显示相应的幻灯片平滑过渡
3. 切换活动链接突出显示的点击链接的类别

请注意这个解决scheme：

1. 仅使用一个菜单来最小化标记并防止内容重复。
2. 只需要jQuery库
3. 适用于dynamic数量的幻灯片

 $(document).ready(function() { var slideNum = $('.page').length, wrapperWidth = 100 * slideNum, slideWidth = 100 / slideNum; $('.wrapper').width(wrapperWidth + '%'); $('.page').width(slideWidth + '%'); $('a.scrollitem').click(function() { $('a.scrollitem').removeClass('selected'); $(this).addClass('selected'); var slideNumber = $($(this).attr('href')).index('.page'), margin = slideNumber * -100 + '%'; $('.wrapper').animate({ marginLeft: margin }, 1000); return false; }); }); 

 html, body { height: 100%; margin: 0; overflow-x: hidden; position: relative; } nav { position: absolute; top: 0; left: 0; height: 30px; } .wrapper { height: 100%; background: #263729; } .page { float: left; background: #992213; min-height: 100%; padding-top: 30px; } #page-1 { background: #0C717A; } #page-2 { background: #009900; } #page-3 { background: #0000FF; } a { color: #FFF; } a.selected { color: red; } .simulate { height: 2000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper"> <nav> <a href="#page-1" class="scrollitem selected">page 1</a> <a href="#page-2" class="scrollitem">page 2</a> <a href="#page-3" class="scrollitem">page 3</a> </nav> <div id="page-1" class="page"> <h3>page 1</h3> <div class="simulate">Simulated content heigher than 100%</div> </div> <div id="page-2" class="page"> <h3>page 2</h3> <div class="simulate">Simulated content heigher than 100%</div> </div> <div id="page-3" class="page"> <h3>page 3</h3> <div class="simulate">Simulated content heigher than 100%</div> </div> </div> 

Answer 2

“随着你的规模需要坚持到页面上，而不是透露其他人”

要实现这一点，请保持对当前页面元素的引用，然后在调整窗口大小时执行无延迟滚动至此元素：

 var currentPage; //here is where we will hold the reference jQuery('a.scrollitem').click(function () { var targetPage = $(jQuery(this).attr('href')); jQuery('a.scrollitem').removeClass('selected'); jQuery(this).addClass('selected'); jQuery('.toggle').css({'display':'none'}); jQuery('.wrapper').scrollTo(targetPage, 1200, function(){ jQuery('.toggle').css({'display':'block'}); }); currentPage = targetPage; //here is where we set the reference return false; }); //and here we do a no-delay scrollTo $(window).resize(function(){ if(!!currentPage){ console.log('window resized. scrolling to: ', currentPage.attr('id')); jQuery('.wrapper').scrollTo(currentPage); } }); 

在我看来，这使得它相当敏感。

页面需要能够很长（800px），并且仍然可以滚动，没有最后一页的空白。

为了摆脱这种差距，我只是让所有的page比他们需要的时间长一些。 滚动不受此影响，因为页面左alignmentleft:0; 。 我怀疑其他页面有差距，并且这些页面上的空白被滚动条覆盖。

 .page { width: 110%; } 

需要工作至lessie9

恐怕在这方面我不能帮助; 我只安装了IE11。 但是，嘿，它在IE11中效果很好。

工作小提琴