gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:48:47 25 4
gpt4 key购买 nike

努力实现:

单页网站 - 使内容适合 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 的 What i am trying to achieve is that: zoomed out to 20%, look at the scroll bar ..

最佳答案

如果我没听错,使用纯 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

关于jquery - 单页网站 - 使内容适合 100% 的屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23890871/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com