첫 번째 화면과 두 번째 화면 사이에 스크롤 마우스 휠을 만들어 스위칭 효과를 레벨링하고 싶었습니다. 나는 많은 문제에 직면했다. 나중에 KK의 도움으로 마침내이 문제를 해결했습니다. 나는 매우 행복했기 때문에 그것을 녹음했습니다.
내 초기 코드는 다음과 같습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"/> <style> div {너비 : 700px; 높이 : 1000px;}. 빨간색 {backg </div> <div> </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 (); // 브라우저 창에서 현재 보이는 영역의 크기를 가져옵니다. // 마우스 스크롤 스크롤 후 전체 화면을 전환 var scrollfunc = function (e) {var scrolltop = document.body.scrolltop || document.documentElement.scrolltop; e | | | | | Window.event; if ((e.wheeldelta <0 || e.detail> 0) && scrolltop> = 0 && scrolltop <height) {// 다른 브라우저에 의해 스크롤 $ (document.body) .animate ({scrolltop : height}, "fast"); $ (document.documentElement (scracumentElement)); if ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = height && scrolltop <= height+20) {// 다른 브라우저 $ (document.body). Animate ({scrolltop : 0}, "fast"(document.documentElement) if (document.addeventListener) {document.adeventListener ( 'dommousescroll', scrollfunc, false);} Window.onMouseWheel = document.onmousewheel = scrollfunc;IE와 Firefox에서 그러한 코드를 테스트했지만 OnMouseWheel 이벤트는 항상 Google에서 여러 번 트리거됩니다. 이것은 매우 성가신 일입니다. 왜 여러 번 트리거됩니까? 디버깅 후 마우스를 스크롤 할 때마다 작은 그리드와 하나의 작은 그리드로 천천히 스크롤하는 대신 항상 한 번에 많이 스크롤했습니다. 이로 인해 스크롤 할 때 onmousewheel 이벤트가 여러 번 트리거되고 scrollfunc 기능이 호출됩니다. 함수의 애니메이션 함수가 실행되지 않으면 스크롤 바가 롤 다운 할 수없고 페이지가 롤업 할 수 없도록 지속적으로 호출됩니다. 따라서 위의 JS 코드를 다음으로 변경했습니다.
$ (document) .ready (function () {var height = $ (window) .Height (); var scrollFunc = function (e) {docum scrolltop> = 0 && scrolltop <height) {$ (docum = scrollfunc;});} else if ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = height && scrolltop <= height+20) {$ (document.body) .animate ({scrolltop : 0}, "fast", "linear", function () {document.onmousewHeel = scrollfunc;}); $ (document.documentElement) .animate ({scrolltop : 0}, "fast", "linear", function () {document.onmousewheel = scrollfunc;});}}; if (document.addeventListener) {document.adeventListener ( 'dommousescroll', scrollfunc, false);} document.onmousewheel = scrollfunc;});좋아, 코드는 이제 정상적으로 작동하고 있지만 초보자이고 코드가 절묘하게 쓰여지지 않았기 때문에 KK에 의해 다시 들었습니다. 그의 프롬프트에서 나는 중복 코드를 수정했다.
$ (document) .ready (function () {var height = $ (wind isfinish = true; var scrollfunc = function (e) {if (isfinish) {var scrolltop = body.scrolltop; e = e | || if ((e.wheeldelta <0 || e.detail> 0) && scrolltop> = 0 && scrolltop <height-20) {e.weeldetta 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.adeventListener ( 'dommouseScroll', scrollFunc, false);}} else {document.onmousewHeel = scrollFunc;});마지막으로 소개 코드를 받았습니다. 나는이 문제를 해결함으로써 많은 것을 배웠다고 말해야한다. 앞으로, 우리는 "쓰기, 더 많은 일"이라는 목표를 향해 더 열심히 노력해야합니다! ! !
글쓰기에 문제가 있으면 모든 주인들로부터 조언을 해주세요. 겸손하게 배울 것입니다.