Je voulais faire une roue de souris à défilement entre les premier et deuxième écrans pour niveler l'effet de commutation. J'ai rencontré de nombreux problèmes. Plus tard, avec l'aide de KK, j'ai finalement résolu ce problème. J'étais très heureux, alors je l'ai enregistré:
Mon code initial ressemble à ceci:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8" /> <style> div {width: 700px; height: 1000px;}. Red {background-Color: Red;}. Yellow {background-Color: Yellow;} </ style> </ivr> <dody> </ div> <v> </ div> <div> </ div> <div> </ div> </ body> <script src = "../ jQuery / jQuery.min.js"> </ script> <script src = "test.js"> </ script> </html> $ (document) .ready (function () {var height = $ (window) .Height (); // Obtenez la taille de la zone actuellement visible dans la fenêtre du navigateur // change l'écran entier après le Scrolls de la souris window.event; if ((e.wheeldelta <0 || e.detail> 0) && scrolltop> = 0 && scrolltop <height) {// scroll vers le bas par différents navigateurs $ (document.body) .animate ({scrolltop: height}, "fast"); $ (document.DocumentElement) .animate ({scrolltop: height}, "fast"}. if ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = height && scrolltop <= height + 20) {// scroll up by différents navigateurs $ (document.body) .animate ({scrolltop: 0}, "Fast"); $ (document.DocumentElement). if (document.addeventListener) {document.addeventListener ('Dommesescroll', scrollfunc, false);} window.onmousewheel = document.onmousewheel = scrollfunc;J'ai testé de tels codes dans IE et Firefox, mais l'événement OnMousewheel sera toujours déclenché plusieurs fois sous Google. C'est une chose extrêmement ennuyeuse. Pourquoi est-il déclenché plusieurs fois? Après le débogage, j'ai découvert que chaque fois que nous faisons défiler la souris, nous faisons toujours défiler beaucoup à la fois, au lieu de faire défiler lentement par une petite grille et une petite grille. Cela conduit à la déclenchement de l'événement OnMouse Well à plusieurs reprises lors du défilement et la fonction ScrollFunc est appelée. Lorsque la fonction animée de la fonction n'est pas exécutée, elle sera appelée en continu, afin que la barre de défilement ne puisse pas baisser et que la page ne peut pas se retirer. J'ai donc changé le code JS ci-dessus en ce qui suit:
$ (document) .ready (function () {var height = $ (window) .Height (); var scrollfunc = function (e) {document.onmousewheel = undefined; var scrolltop = document.body.scrolltop || document.documentElement.scrolltop; e = e || window.event; if (e.wheeldelta <0 | e.detail> 0) &&&&&We ScrollTop> = 0 && ScrollTop <Height) {$ (document.body) .animate ({ScrollTop: Height}, "Fast", "Linear", function () {document.onmousewheel = ScrollFunc;}); $ (document.DocumentElelement) .animate ({ScrollTop: Height}, "Fast", "Linear", furet () {documentweel = wheewele = scrollfunc;});} else if ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = height && scrolltop <= height + 20) {$ (document.body) .animate ({scrolltop: 0}, "Fast", "linéaire", function () {document.onMousewheel = scrollfuncc;}); $ (document.DocumentElement) .animate ({scrolltop: 0}, "Fast", "linéaire", function () {document.onmousewheel = scrollfunc;});}}; if (document.addeventListener) {document.addeventLelener ('Dommousscroll', scollfunc, false);} document. = scrollfunc;});OK, le code fonctionne maintenant normalement, mais comme je suis un novice et que le code n'est pas rédigé de manière exquis, KK m'a de nouveau dit. À son invite, j'ai modifié le code redondant:
$ (document) .ready (function () {var height = $ (window) .Height (); var width = $ (window) .width (); var body; if (navigator.useragent.indexof ("Firefox")> 0 || navigator.useragent.indexof ("msie")> 0) {body = document.DocumentElement;} else {body) isFinish = true; var scrollfunc = function (e) {if (isFinish) {var scrolltop = body.scrolltop; e = e || window.event; if ((e.wheeldelta <0 || e.detail> 0) && scrolltop> = 0 && scrolltop <height-20) {Scroll (height);} else if ((. e.detail <0) && scrolltop> = height && scrolltop <= height + 20) {Scroll (0);}}}; var scroll = function (height) {isFinish = false; $ (body) .animate ({ScrollTop: Height}, "Fast", "linear", function () {isFinish = true;});}; if (navigator.useragent.indexof ("firefox")> 0) {if (document.addeventListener) {document.addeventListener ('Dommesescroll', scrollfunc, false);}} else {document.onmouseweel = scrollfunc;}});A enfin obtenu le code pour l'introduction. Je dois dire que j'ai beaucoup appris en résolvant ce problème. À l'avenir, nous devons travailler plus dur vers l'objectif de "écrire moins, faire plus"! ! !
S'il y a quelque chose de mal à l'écriture, veuillez me donner des conseils de tous les maîtres et j'apprendrai humblement.