响应式水平页面滑动

Question

我希望创建水平响应式页面导航，如下图所示:

这是我已经完成的部分: 演示

$(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. 页面可以很长（800像素）并且仍然可以滚动，而不会在最后一页出现空隙。
3. 需要支持IE9及以上版本

- user1278673

---

你的 jsFiddle 出问题了。 - Navelpluisje

只是转换效果不起作用，这就是为什么您看不到幻灯片效果的原因。我不确定为什么它坏了。此外，它目前设置为960，请扩展预览窗口。 - user1278673

我认为你想要的效果是：http://api.jquery.com/slidetoggle/ - user2628521

更新的问题（这个JSFiddle实际上可以工作） - user1278673

没有特别的原因，这只是我能想到的唯一方法，但请教育我，只使用jQuery会很棒。 - user1278673

Answer 1

水平页面滑动

带有左边距动画效果

这个 jQuery 代码片段：

1. 计算幻灯片数量并相应地设置包装器的宽度。
2. 根据点击的链接，动画效果将 left-margin 应用到包装器上，以平滑的转换显示相应的幻灯片。
3. 切换已点击链接的类以突出显示活动链接。

请注意，此解决方案：

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

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

- web-tiki

---

这是一个更好的方法。滚动是hacky的。 - Jonathan Wilson

这比之前好多了，谢谢！但是最后还有一个问题，我看页面宽度和包装器宽度取决于有多少页，不幸的是，加载的内容完全是动态的.. 有什么推荐的解决方法吗？ - user1278673

@DawidvanderHoven 更好的是，只有一个菜单出现：http://jsfiddle.net/webtiki/wtvaJ/2/ - web-tiki

嗨，我有另一个问题：http://stackoverflow.com/questions/24532381/jquery-on-click-animation-only-happens-after-first-click ，我觉得你可能是最合适的人来询问，如果你有5分钟看看它的话。 - user1278673

@DawidvanderHoven 谢谢夸奖 :) 不幸的是我没有时间去看它，但看起来你找到了一个解决方案。 - web-tiki

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），同时仍然可滚动，最后一个页面没有间隙。

为了消除这个间隙，我只是让所有的“页面”比它们实际需要的稍微长一点。这不会影响滚动，因为页面是左对齐的，使用“left:0;”。我怀疑其他页面也有同样的间隙，并且那些页面上的间隙被滚动条覆盖了。

.page {
    width: 110%;
}

需要在IE9及以上版本上工作

恐怕我无法在这方面提供帮助；我只安装了IE11。但是，在IE11中它运行得非常好。

可工作的演示

- Jonathan Wilson

---

谢谢你的回答，它有效，但是...在缩小窗口时是否没有解决卡顿的方法...另外，如果我将宽度设置为110％，当屏幕变小时会隐藏内容... - user1278673

就卡顿的问题而言...那是因为它在不断滚动！您可以添加延迟，以便它不会如此频繁地更新，但这样会出现间隙。 - Jonathan Wilson