响应式水平页面滑动

Posted

技术标签:

【中文标题】响应式水平页面滑动【英文标题】：Responsive horizontal page sliding 【发布时间】：2014-08-16 08:51:22 【问题描述】：

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

这就是我设法做到的：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>

然而，我遇到了几堵砖墙，因为我的反应在一定程度上，就像你缩放它需要坚持到它所在的页面而不显示其他页面。

此外，如果页面很长，它会显示一个完美的滚动条，但在最后一张幻灯片上，有一个与滚动条一样宽的间隙。

我有以下要求：

    需要响应 页面需要能够很长（800 像素）并且仍然可以滚动，并且与最后一个页面没有间隙。 需要在最低 ie9 上工作

【问题讨论】：

你的 jsFiddle 坏了 只是过渡效果不好，所以看不到幻灯片效果..不知道为什么坏了..目前设置为960，只需展开预览窗口跨度> 我想你想要这个效果：api.jquery.com/slidetoggle 更新的问题（这个 jsfiddle 确实有效） 这是浏览器特有的东西吗？我只是看了看，没有问题（至少在 chrome 上） 【参考方案1】：

水平页面滑动

带有左边距动画

这个 jQuery sn-p ：

    计算幻灯片的数量并相应地设置包装的宽度。 根据单击的链接，left-margin 在包装器上以动画方式显示相应的幻灯片并平滑过渡 切换点击链接的类别以突出显示活动链接

注意这个解决方案：

    仅使用一个菜单项来最小化标记并防止内容重复。 仅需要 jQuery 库 适用于动态数量的幻灯片 

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

【讨论】：

这是一个更好的方法。滚动很麻烦 这好多了，谢谢！最后一个问题，我看到页面宽度和包装器宽度取决于有多少页面，不幸的是，正在加载的内容是完全动态的..有什么推荐的解决方法吗？ @DawidvanderHoven BTW 你能改变 HTML 吗？ @DawidvanderHoven 更好，只有一个菜单出现：jsfiddle.net/webtiki/wtvaJ/2 哇，再次感谢您的帮助，从您那里学到了很多...我会奖励您 50 分，但显然必须等待 11 小时【参考方案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);
    
);

在我看来，这使它反应灵敏。

页面需要能够很长（800 像素）并且仍然可以滚动，并且与最后一个页面没有间隙。

为了消除这个差距，我只是让所有pages 比他们需要的时间长一点。滚动不受此影响，因为页面左对齐 left:0;。我怀疑其他页面有相同的间隙，并且这些页面上的间隙被滚动条覆盖。

.page 
    width: 110%;

需要使用最低 ie9

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

Working fiddle

【讨论】：

感谢您的回答，它有效，但是...当您慢慢缩小窗口时，是否无法解决抖动问题。如果我将其设为 110% 宽度，它会在屏幕变小了…… 至于急躁……那是因为它一直在滚动！你可以添加一个延迟，这样它就不会那么频繁地更新，但你会看到差距。

以上是关于响应式水平页面滑动的主要内容，如果未能解决你的问题，请参考以下文章

如何在响应式页面上的 div 内垂直和水平居中两个图像

响应式设计-Responsive web design

响应式网站在苹果手机上向下滑动出现卡顿怎么解决？

为响应式导航菜单添加向下滑动效果

Slick.js使用方法（响应式轮播插件）

响应式填充问题