Full Screen scrolling

A recent week has written a PC-side adaptive Download Promotion page.

The first time to do adaptive pages, here to record some experience.

First I get the AI design drawings that are 1920*1080 resolution.

Compared with the ordinary fixed width page, in the adaptive page, the width is set to 100%, the height needs to be adjusted by JS, by acquiring the height of the viewport. Assign a value to each full screen page. In the project I set the minimum height of the page to 600px. The PC side probably also has no resolution below this number.

var height = Window.innerheight | | Document.documentElement.clientHeight | | Document.body.clientHeight
if (height <) height = 600

Then, in the layout of the page, you need to convert the resolution of 1080p to REM. Then through the CSS @media modify the page base font-size to achieve the purpose.

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

}

Part of the picture, note background-size to use the contain property. Then each page to set a good background. In order to ensure that the ratio of similar 1000*1400 can achieve a one-page effect. The height of the picture container can be set to 100%, which is then centered by the size and position properties of the background. This will have a good effect.

Finally, in order to achieve the purpose of page full screen scrolling. Then use JS.

$ (document). Ready (function () {
Reloadheight ()
var isfinish = True
var scrollfunc = function () {
var height = getheight ()
The current page is page x to prevent the page from just over 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 '
}, the function () {
Isfinish = True
})
}
}
$ (this). On ("MouseWheel", Scrollfunc)
})

When debugging, it is found that a single scroll will trigger multiple MouseWheel events under Chrome. So the use of isfinish control.

$ ("HTML, Body"). Animate () under IE use the body under Html,chrome. Still don't know why.

Then this whole screen scrolling effect, originally with JS write, but the effect is very catch urgent, and then change the animation of jquery, the effect is slightly better, but in fact still very catch urgent, especially under IE.

Full Screen scrolling