Html 滑动整个网页

Sliding An Entire Web Page

提问by Alex

Is there a way to mimic the native transition and functionality of "sliding entire pages" like you see on the iPhone but inside a web browser instead?

有没有办法模仿您在 iPhone 上看到的“滑动整个页面”的本机转换和功能，而不是在网络浏览器中？

I want one HTML page to slide over and a new HTML page to take it's place after the press of a button.

我想要一个 HTML 页面滑过，一个新的 HTML 页面在按下按钮后取而代之。

The button cannot be constant. So like if you were to have a constant header with buttons that slid content inside a box then that would be incorrect. I need to slide the entire webpage.

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

Would slides made in HTML5 be what I need? Thank you in advance for any help!

我需要用 HTML5 制作的幻灯片吗？预先感谢您的任何帮助！

Edit: I have also been thinking about possibly setting up two full-sized DIV's side by side with one hidden off the page with "overflow:hidden" and then using CSS transitions to hit a button and then move one DIV off the screen and the other one into view, but I have no idea how to do that.

编辑：我也一直在考虑可能并排设置两个全尺寸 DIV，其中一个用“溢出：隐藏”隐藏在页面外，然后使用 CSS 转换点击一个按钮，然后将一个 DIV 移出屏幕，然后另一个进入视图，但我不知道如何做到这一点。

The other really hard part about this is that my DIV containers need to be dynamic and 100% width and height. I can't used fixed dimensions.

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

EDIT:

编辑：

Using the scrollTo and localscroll functions developed by Ariel FleslerI have been able to complete 99% of what I am looking for. However, at the very end of development, I hit a huge road block. Here is an image that I hope helps explain what I am trying to do:

使用Ariel Flesler开发的 scrollTo 和 localscroll 函数，我已经能够完成 99% 的任务。然而，在开发的最后，我遇到了一个巨大的障碍。这是一张图片，我希望可以帮助解释我正在尝试做的事情：

My problem is that the main content area is a fixed position with an overflow-y auto so that I can keep the scrollbar for the DIV inbetween the header and the footer. But the problem is that when I initiate the sliding animation of my DIV by hitting my button, the fixed content area does not move and only the header and footers move. If I change the positioning of the main content area to "relative" everything moves like I want it to, but I lose the positioning of the scroll.

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

If someone could figure this out I will be greatly indebted to you!

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

(I would post a link to what I have, but I can't. It's confidential work for a company)

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

Thank you in advance!!

先感谢您！！

EDITI am working on reviewing all this information. I will respond in a couple days. Thank you all for you input!

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

采纳答案by Matt Asbury

I am currently developing something that may be useful to you. It uses the side by side divs you considered but I found difficulties in using 100% width due to issues with the scrollbars and differences in the browsers. I have overcome this by setting the widths in javascript (jQuery) which offers a cross-browser solution (tested in IE7, IE8, FF, Chrome, Safari, Opera).

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

Feel free to take as much of the source code as you like by inspecting the source and if you need me to talk you through anything, just let me know.

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

http://madesignuk.com/uploader/

http://madesignuk.com/uploader/

PS I'm not 100% sure on the rules regarding posting the link to my personal site so if it is an issue for moderators, please let me know.

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

PPS The site is in development so please try not to mock me :p

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

回答by Guffa

You can do that by placing elements side by side inside a container with overflow:hidden, and just move the inner elements.

您可以通过将元素并排放置在带有 的容器内overflow:hidden，然后移动内部元素来实现。

Here is a proof of concept. It doesn't handle resizing of the page after it has loaded, but it at least shows the principle. I have put three slides in the container, but the code is dynamic so that you can place any number you like.

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

<!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>

Edit

编辑

Now jsfiddle is up again, so you can try it out here: jsfiddle.net/9VttC

现在 jsfiddle 再次启动，所以你可以在这里尝试：jsfiddle.net/9VttC

回答by Pioul

Use the scrollTopCSS attribute : you want to scroll down 100px in your main content area ? Just do that :

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

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

The second line is made up with jQuery, but just remember the principle : affect the new scrollTop value to your main_content_area div's CSS.

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

回答by Tyom

Have you looked at LocalScroll? It will make all hash links scrollable within the container you define. You would have to set the width of slides though, as you'll need to float them.

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

回答by Shaakunthala

Try JQuery Cycle plugin.

试试 JQuery Cycle 插件。

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

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

They have provided lot of sample code and tutorials, so it is easy for you to build it your own way.

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

回答by appi2012

If I understand correctly, the scrollTo method works, but only if you change the position:fixed to position:relative, which has the consequence of making the scrollbar stretch beyond the scrolling div?

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

Wouldn't it be easier to put a wrapper div around your main content area with a top margin to account for the header and a bottom margin to account for the footer, and set it to have overflow:scroll, and to use the scrollTo function within it?

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

回答by joksnet

The Google Chrome Team made 20 Things I Learned About Browsers and the Webwhich has this effect.

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

回答by Blender

Just as a theoretical example, but I would create static HTML pages and use jQuery to load the content from them (to provide compatibility). The main problem would be the scrolling.

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

I use jQuery to calculate the width of the browser, set that to be the width of the <body>, and then set overflow: hidden. Then, just create an absolutely positioned content box, and slide both of them at once.

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

I'll post some code later, but this is what I would begin with (I, being a pathetically incompetent JS fiddler).

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

回答by JC Leyba

You could use something like Coda Slider, and have the content of the slide be the whole page.

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

回答by István Ujj-Mészáros

jQuery pageSlideis an other alternative.

jQuery pageSlide是另一种选择。