Question

如何实施以下内容：

我希望div跨越身体的宽度和高度，当你向下滚动时，你会看到另一个Div占据身体的相同宽度和高度，如下页所示</ p>

https://www.lexcorp.io/#/home

这怎么可能？

Answer 1

使用视口单元。

视口百分比长度定义了相对于视口大小的长度，即文档的可见部分。只有基于Gecko的浏览器会在修改视口大小时动态更新视口值（通过修改桌面计算机上窗口的大小或通过在手机或平板电脑上转动设备）。

div {
height:100vh; 
max-height:100vh;
}

CanIUse.com - Viewport Units

Answer 2

抱歉，我的初始代码是废话。我注意到原始网站甚至没有使用滚动条。这是一个修改版本，它使用变换和鼠标滚轮来获得额外的平滑度。

https://jsfiddle.net/foreyez/f48j27f0/

var pageSize = $(window).height();
$( window ).resize(function() {
   pageSize = $(window).height();
});
$('div').bind('mousewheel', function(e) {
    if(e.originalEvent.wheelDelta / 120 > 0) 
    {
    //up
     $('#container').css('transform','translateY(0px)');
    } else {
    //down
        $('#container').css('transform','translateY(-' + pageSize + 'px)');
    }
});

Answer 3

如果浏览器支持是个问题，您也可以这样做：

html,
body {
  height: 100%;
}

如何制作每个Div是一个占据身体整个高度的部分？

3 个答案: