css全屏滚动效果 |鼠标移到显示css

html,
body {
height: 100%;
overflow: hidden;
}
section {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
display: block;
}
section:nth-child(1) {
background-color: #fff;
}
section:nth-child(2) {
background-color: #333;
}
section:nth-child(3) {
background-color: #ff5252;
}
section >div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 添加鼠标滚轮事件，在不同 section 之间切换 */
$(document).on("mousewheel DOMMouseScroll", function(e) {
e.preventDefault();
if(e.originalEvent.wheelDelta >0 || e.originalEvent.detail< 0) {
if($(window).scrollTop() !== 0) {
var top = $(window).scrollTop();
$(window).scrollTop(top - $(window).height());
}
}else {
if($(window).scrollTop() !== ($(document).height()-$(window).height())) {
var top = $(window).scrollTop();
$(window).scrollTop(top + $(window).height());
}
}
});

首先，大家需要在HTML文件中添加若干个section标签，每个标签代表一个页面。这里，大家使用CSS将每个页面设置为固定高度的全屏大小，并为其添加overflow:hidden属性，使其不显示滚动条。

接着，在CSS文件中为每个页面添加不同的样式，为其设置不同的背景色或背景图等，以便区分页面之间的差异。

最后，通过添加鼠标滚轮事件，大家可以监听用户的滚动行为，并通过JavaScript代码实现页面之间的切换。具体实现方式可以参考上面的代码。