时间：2021-07-01 10:21:17 帮助过：4人阅读
参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，还有很多可以拓展的空间。希望大家能多提意见与建议。
代码如下:
HTML
window对象滚动插件
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow: hidden;;
}
.wrap{
font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
font-size:14px;
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow:hidden;
}
.stage,.page{
width: 100%;
height: 100%;
}
.stage1{
background-color:red;
}
.stage2{
background-color:#fff;
}
.stage3{
background-color:yellow;
}
.stage4{
background-color:green;
}
.stage5{
background-color:blue;
}
.page{
float: left;
}
.page2{
background-color: #666;
}
.page3{
background-color: #ddd;
}
.stageControl{
position: fixed;
}
.stageControl ul li{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.stageControl ul li:hover{
color: blue;
}
.pageControl{
position: fixed;
left: 200px;
}
.pageControl ul li{
float: left;
width: 50px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
}
.pageControl ul li:hover{
color: blue;
}
JavaScript
详细的代码下载见https://github.com/codetker/myWindowScroll
以上所述就是本文的全部内容了，希望大家能够喜欢。