Question

有没有办法模仿“滑动整个页面”的原生过渡和功能，就像你在iPhone上看到的那样，而是在网页浏览器中呢？

我想要一个HTML页面滑过，一个新的HTML页面在按下按钮后就可以了。

按钮不能是常量。因此，如果您有一个带有按钮的常量标题，这些按钮可以在框内滑动内容，那么这将是不正确的。我需要滑动整个网页。

HTML5制作的幻灯片是否符合我的要求？提前感谢您的帮助！

编辑：我一直在考虑可能并排设置两个全尺寸DIV，其中一个隐藏在页面上，其中包含“溢出：隐藏”，然后使用CSS过渡按一个按钮，然后将一个DIV移出屏幕和另一个进入视图，但我不知道该怎么做。

另一个非常困难的部分是我的DIV容器需要动态且100％宽度和高度。我无法使用固定尺寸。

修改

使用由Ariel Flesler开发的scrollTo和localscroll函数，我已经能够完成我正在寻找的99％。但是，在开发的最后阶段，我遇到了一个巨大的障碍。这是一张我希望有助于解释我想要做的图像：

alt text

我的问题是主要内容区域是一个带有overflow-y auto的固定位置，因此我可以在页眉和页脚之间保留DIV的滚动条。但问题是，当我按下我的按钮启动我的DIV的滑动动画时，固定的内容区域不会移动，只有页眉和页脚移动。如果我将主要内容区域的位置更改为“相对”，一切都会像我想要的那样移动，但是我失去了滚动的定位。

如果有人能解决这个问题，我将非常感激你！

（我会发布我所拥有的链接，但我不能。这是公司的保密工作）

提前谢谢!!

修改我正在审查所有这些信息。我会在几天后回复。谢谢大家的投入！

Answer 1

我目前正在开发可能对您有用的内容。它使用您考虑的并排div，但由于滚动条的问题和浏览器的差异，我发现使用100％宽度时遇到困难。我已经通过在javascript（jQuery）中设置宽度来克服这一点，它提供了跨浏览器解决方案（在IE7，IE8，FF，Chrome，Safari，Opera中测试过）。

通过检查来源，您可以随意获取尽可能多的源代码，如果您需要我通过任何方式与您交谈，请告诉我。

http://madesignuk.com/uploader/

PS我对于将链接发布到我的个人网站的规则并不是100％肯定，所以如果这是主持人的问题，请告诉我。

PPS网站正在开发中，所以请尽量不要嘲笑我：p

Answer 2

您可以将元素并排放置在具有overflow:hidden的容器内，然后移动内部元素。

这是一个概念证明。它在加载后不会处理页面大小调整，但它至少显示了原理。我在容器中放了三张幻灯片，但代码是动态的，所以你可以放置任何你喜欢的号码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Page Slide</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){
  var w = $(window).width();
  var h = $(window).height();
  var slides = $('.Slides > div');
  $('.SlideContainer').css({ height: (h-60) + 'px' });
  $('.Slides').css({ width: slides.length + '00%' });
  slides.css({ width: w + 'px' });

  var pos = 0;

  $('.Left').click(function(){
    pos--;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });
  $('.Right').click(function(){
    pos++;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });

});

</script>

<style type="text/css">

body { margin: 0; padding: 0; }

.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }

.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }

.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }

</style>

</head>
<body>

<div class="Header">
  absolutely positioned header
</div>

<div class="SlideContainer">
  <div class="Slides">

    <div class="Slide">
      <div class="Content">
        <h1>Slide 1</h1>
        <a href="#" class="Left">&laquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 2</h1>
        <a href="#" class="Left">&laquo;</a>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 3</h1>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

  </div>
</div>

<div class="Footer">
  absolutely positioned footer
</div>

</body>
</html>

修改

现在jsfiddle又回来了，所以你可以在这里试试：jsfiddle.net/9VttC

Answer 3

你看过LocalScroll了吗？它将使您定义的容器中的所有哈希链接都可以滚动。你必须设置幻灯片的宽度，因为你需要浮动它们。

Answer 4

使用scrollTop CSS属性：您想在主要内容区域向下滚动100px？就这样做：

var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);

第二行由jQuery组成，但只记得原则：将新的scrollTop值影响到main_content_area div的CSS。

Answer 5

尝试使用JQuery Cycle插件。

http://jquery.malsup.com/cycle/

他们提供了大量的示例代码和教程，因此您可以轻松地按照自己的方式构建它。

Answer 6

如果我理解正确，scrollTo方法可以工作，但只有当你改变位置时：固定到position：relative，这会导致滚动条超出滚动div？

在主要内容区域周围放置一个包装器div是否更容易用顶部边距来计算页眉和底部边距以考虑页脚，并将其设置为溢出：滚动，并使用它内的scrollTo函数？

Answer 7

Google Chrome小组制作了20 Things I Learned About Browsers and the Web，效果如此。

Answer 8

正如一个理论示例，但我会创建静态HTML页面并使用jQuery从中加载内容（以提供兼容性）。主要问题是滚动。

我使用jQuery计算浏览器的宽度，将其设置为<body>的宽度，然后设置overflow: hidden。然后，只需创建一个绝对定位的内容框，并立即滑动它们。

我稍后会发布一些代码，但这就是我要开始的（我是一个可怜的JS小提琴手）。

Answer 9

您可以使用Coda Slider之类的内容，并将幻灯片的内容作为整个页面。

Answer 10

jQuery pageSlide是另一种选择。

滑动整个网页

10 个答案:

修改