滑动整个网页答案

【问题标题】：Sliding An Entire Web Page滑动整个网页
【发布时间】：2011-05-23 03:02:08
【问题描述】：

有没有一种方法可以模拟“滑动整个页面”的原生转换和功能，就像您在 iPhone 上看到的那样，但在网络浏览器中？

我希望一个 HTML 页面在按下按钮后滑过，一个新的 HTML 页面取代它。

按钮不能是常量。因此，如果您有一个恒定的标题，其中包含在框内滑动内容的按钮，那将是不正确的。我需要滑动整个网页。

我需要用 HTML5 制作的幻灯片吗？提前感谢您的帮助！

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

另一个真正困难的部分是我的 DIV 容器需要是动态的，并且需要 100% 的宽度和高度。我不能使用固定尺寸。

编辑：

使用Ariel Flesler 开发的scrollTo 和localscroll 函数，我已经能够完成我所寻找的99%。然而，在开发的最后阶段，我遇到了一个巨大的障碍。这是一张我希望能帮助解释我想要做什么的图片：

我的问题是主要内容区域是一个固定位置，带有一个自动溢出功能，这样我就可以将 DIV 的滚动条保持在页眉和页脚之间。但问题是，当我通过点击按钮启动 DIV 的滑动动画时，固定内容区域不会移动，只有页眉和页脚移动。如果我将主要内容区域的定位更改为“相对”，一切都会按照我的意愿移动，但我会失去滚动的定位。

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

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

提前谢谢你！！

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

【问题讨论】：

能否将规则overflow-y:scroll 添加到主要内容区域以使滚动条永久保留在那里？
不，抱歉，我不想那样做。它需要更加动态。需要滚动条时滚动条，不需要滚动条时不要滚动条。
我认为您正在期待一个现成的 iPhonish 插件或其他东西，我敢肯定，如果您停下来思考一分钟，您可以解决它，您已经提供了很多好的工具来一起工作。
不要惩罚自己，试试 Silverlight
不能使用任何第三方插件。 Flash 和 Silverlight 不是选项。用户应该能够使用这个网站，只需要一个网络浏览器和打开 javascript

标签： html css slide

【解决方案1】：

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

通过检查源代码，随意获取尽可能多的源代码，如果您需要我与您讨论任何问题，请告诉我。

http://madesignuk.com/uploader/

PS 我不能 100% 确定关于将链接发布到我的个人网站的规则，所以如果版主有问题，请告诉我。

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

【讨论】：

感谢您的帮助，但这并不是我所需要的。我有两台显示器，我可以把这个网站延伸得很远。如果我将浏览器窗口拖出，我可以看到你所有的 DIV 在屏幕上排成一排。我需要每个“幻灯片”以 100% 的宽度填充屏幕，并且在您点击下一个按钮之前我不想看到任何其他内容。我猜您的代码在 onLoad 上找到了我的浏览器宽度，但是当您调整浏览器大小时它不会动态更新。
您所要做的就是询问 :) 再次检查。我已经修改了代码，以便在调整浏览器大小时，滑块会随之调整大小。这造成了滑块内元素位置的问题，因此我现在将其重置为起始位置。如果有人能想到保留当前位置的方法，请随时在此处提交解决方案。我有一种感觉，只要有时间，我可以想出一个基于数学的解决方案。
我喜欢你对这个页面所做的修改。它更接近我正在寻找的东西。但是，您认为您可以编辑此页面，使右侧的滚动条出现在页眉和页脚之间（同时在底部放置一个静态页脚）。最后，作为测试，使主要内容区域充满大量数据，以便它在内容区域中垂直滚动（但不滚动页面）。如果您的方法可以做到这一点，您将获得 50 个代表点。我自己会这样做，但我没有时间测试另一种方法。
现在怎么样？我正在尝试解决的 IE7 中的小问题。
好人！这正是我所需要的！不幸的是，我没有及时回到这个网站给你赏金（我没有意识到我只有一定的时间来奖励它）但这是最好的解决方案，我给你绿支票无论如何:)

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：

我刚刚看过这个，但如果我希望容器的宽度是动态的并且 100% 的宽度和高度......
我收回我说的话。这是迄今为止最好的建议。但是整体问题还没有解决，有什么想法吗？？

【解决方案4】：

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

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

第二行是用jQuery组成的，但只要记住原理：将新的scrollTop值影响到你的main_content_area div的CSS。

【讨论】：

scrolltop 如何帮助我制作水平滑动 DIV 的动画？
你想从右向左滑动吗？我知道您希望它从上到下滑动。

【解决方案5】：

试试 JQuery Cycle 插件。

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

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

【讨论】：

我看了一下这个工具，它也不起作用。一旦内容被加载到动画区域，它就是一个静态大小。如果调整窗口大小，则在刷新浏览器之前它不会调整内容大小。谢谢，但我认为这对我没有帮助。

【解决方案6】：

如果我理解正确，scrollTo 方法有效，但前提是您将 position:fixed 更改为 position:relative，这会导致滚动条超出滚动 div？

在你的主要内容区域周围放置一个包装器 div 会更容易吗里面的scrollTo函数？

【讨论】：

【解决方案7】：

Google Chrome 团队制作了20 Things I Learned About Browsers and the Web，具有此效果。

【讨论】：

【解决方案8】：

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

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

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

【讨论】：

【解决方案9】：

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

【讨论】：

我对这个工具很熟悉，我正在研究它，但它使用了存在于内容区域之外的常量按钮。它需要就像在 iPhone 上一样，导航是动态的，并且会根据您所在的页面而变化。例如，在您导航到下一页之前，我不希望出现主页按钮。然后在下一页你有一个主页按钮和一个“下一步”按钮。