下面的代码没有考虑响应式的效果，如果考虑的话还需要一些代码进行处理。
【注】当时写的时候仅考虑了 webkit 内核的浏览器，如果是 IE 或者其他浏览器，请增加额外的 CSS 样式进行控制。
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
height: 100%;
overflow-y: scroll;
}
/* 仅适用于Webkit浏览器（Chrome和Safari等） */
::-webkit-scrollbar {
width: 0.3em; /* 设置滚动条宽度 */
}
::-webkit-scrollbar-track {
background-color: transparent; /* 设置滚动条轨道背景色 */
}
::-webkit-scrollbar-thumb {
background-color: rgb(74, 144, 250); /* 设置滚动条滑块颜色 */
border-radius: 4px; /* 设置滚动条滑块圆角 */
}
.image {
height: 90vh; /* 没有使用 100vh，主要是让用户直观的看到下面还有一张图 */
background-size: cover;
background-repeat: no-repeat;
}
/* 设置第一个图片地址 */
.image:nth-child(1) {
background-image: url('test.jpg');
}
/* 设置第二个图片地址 */
.image:nth-child(2) {
background-image: url('test.jpg');
}
</style>
</head>
<body>
<div class="container">
<a href="https://www.baidu.com">
<div class="image"></div>
</a>
<a href="http://www.qq.com">
<div class="image"></div>
</a>
</div>
</body>
</html>显示效果如下：
