jquery - 单页网站 - 使内容适合 100% 的屏幕

Question

努力实现:

单页网站 - 使内容适合 100% 的屏幕

我有一个-

html{
 body{
  #header
  #page1
  #page2
  #page3
 }
}

我正在尝试使每个页面 (id) 适合宽度:100%，高度为 100%因此，如果用户缩小页面并且他现在位于 #page1 div 上，他将看不到任何其他 div因为#page1 div 设置为 100%，宽度和高度，无论窗口大小是多少。

我试图通过设置来实现这一点:

html,body{width:100%; height:100%}

我的 #page1 有一个背景图像和上面的 css，它工作，如果我缩小它设置页面为 100% 高度和宽度。

甚至

#header, #page1, #page2{min-width:100%; min-height:100%}

我怎样才能达到这种效果？

• 我只想给用户它真的是一个页面的错觉而不仅仅是一个div

---

我会尝试更好地解释我自己，假设我是一个用户导航到我的网站并向下滚动到第 2 页，我到达那里并从页面缩小..即使我缩放到只显示 20%该页面将只看到 page2(div) 的 20% 我不会看到其他 div (page1, page3)，与重新调整浏览器窗口大小相同如果我重新调整它的大小，它会保持与 100% 打开时相同的比例。

每个 div(页面)将缩放到窗口高度的 100%。

我想要实现的是:缩小到 20%，看看滚动条，你看不到其他 div 的

Answer 1

如果我没听错，使用纯 CSS 是可能的 - 不是吗？

带有原生滚动条的版本

---

CSS:

html, body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: red;
}
.section {
  position: relative;
  width: 100%;
  height: 100%;
}
#page1 {
  background: blue;
}
#page2 {
  background: yellow;
}
#page3 {
  background: green;
}

JS(缩放时保持百分比滚动偏移)

var scrollOffset = [0,0,0]
var $win = $(window);
var $doc = $(document);

$win
.on('scroll', function(){
    // this is needed because scroll is triggered when zooming before the zoom event
    scrollOffset[2] = scrollOffset[1];
    scrollOffset[1] = scrollOffset[0];
    scrollOffset[0] = 100 / $win.height() * $win.scrollTop();
    console.log('scroll event', scrollOffset);
})
.on('resize', function(){
    // set back the history because of multiple zooming events
    scrollOffset[0] = scrollOffset[1];
    scrollOffset[1] = scrollOffset[2];
    scrollOffset[2] = 0;
    console.log('zoom event', scrollOffset);
    window.scrollTo(0, scrollOffset[0] / 100 * $win.height());
})

http://codepen.io/anon/pen/zqteo

没有原生滚动条但 JS“滚动”的版本

---

CSS:

html, body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: red;
  overflow:hidden; // remove for "normal" content scrolling
}
.section {
  position: relative;
  width: 100%;
  height: 100%;
}
#page1 {
  background: blue;
}
#page2 {
  background: yellow;
}
#page3 {
  background: green;
}

JS(页面“捕捉”的简单示例)

$(function(){
  var top = 0;
  $('.section').on('click', function(){
    top -= 100;
    $('.section').animate({'top': top +'%'});
  });
})

http://codepen.io/anon/pen/ldmBJ