整屏滚动

Posted 2020-08-16

最近一周写了一个pc端自适应的下载推广页面。

第一次做自适应的页面，在此记录一些体会。

首先我拿到的AI设计图纸是1920*1080的分辨率的。

和普通的定宽页面相比，在自适应的页面中，宽度设定为100%，高度需要通过js调节，通过获取视口的高度。再为每一个整屏页面赋值。在项目中我设定页面的最小高度为600px。pc端大概也没有分辨率低于这个数字的了吧。

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
if (height < 600) height = 600

然后页面中在布局的时候需要将1080p下的分辨率转化为rem。然后通过css的@media修改页面的基础font-size从而达到目的。

@media screen and (max-width: 1024px) {
　　html {
　　　　font-size: 62.5% !important;
　　}

}

图片的部分，注意background-size要使用contain属性。然后每一页要设置好底色。为了保证在类似1000*1400的比例下还能达到一屏一页的效果。图片容器的高度可以设置成100%，然后通过background的size和position属性使其居中。这样就会有一个不错的效果。

最后，为了达到页面整屏滚动的目的。再使用js。

$(document).ready(function () {
　　reloadHeight()
　　var isfinish = true
　　var scrollFunc = function () {
　　var height = getHeight()
　　// 当前页面为第X页面 为防止页面刚好超过1.2px。
　　var level = Math.floor((window.pageYOffset+20)/height)
　　var newScrollTop
　　if (event.wheelDelta < 0) {
　　　　if (level === 4) return
　　　　level += 1
　　} else {
　　　　if (level === 0) return
　　　　level -= 1
　　}
　　if (isfinish) {
　　　　isfinish = false
　　　　newScrollTop = level * height
　　　　$("html, body").animate({
　　　　　　scrollTop: newScrollTop + ‘px‘
　　　　}, 400, function () {
　　　　　　isfinish = true
　　　　　　})
　　　　}
　　}
　　$(this).on("mousewheel", scrollFunc)
})

调试的时候发现在chrome下，一次滚动会触发多个mousewheel事件。于是利用isfinish控制。

$("html, body").animate（）在IE下用html，chrome下用body。还不知道为什么。

然后这个整屏滚动的效果，本来用js写的，但是效果很捉急，然后换了jquery的animation，效果稍微好一点，但是其实还是很捉急，尤其是在IE下面。。