ฉันต้องการสร้างล้อเมาส์เลื่อนระหว่างหน้าจอแรกและหน้าจอที่สองเพื่อให้ระดับเอฟเฟกต์การสลับ ฉันพบปัญหามากมาย ต่อมาด้วยความช่วยเหลือของ KK ในที่สุดฉันก็แก้ไขปัญหานี้ ฉันมีความสุขมากดังนั้นฉันจึงบันทึกไว้:
รหัสเริ่มต้นของฉันมีลักษณะเช่นนี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <style> div {width: 700px; ความสูง: 1000px;}. สีแดง {พื้นหลัง-สี: สีแดง; </div> <div> </div> <div> </div> <div> </div> </body> <script src = "../ jQuery/jQuery.min.js"> </script> <script src = "test.js"> </script> $ (เอกสาร) .ready (function () {var height = $ (หน้าต่าง) .height (); // รับขนาดของพื้นที่ที่มองเห็นได้ในปัจจุบันในหน้าต่างเบราว์เซอร์ // สลับหน้าจอทั้งหมดหลังจากเมาส์เลื่อน scrollfunc = ฟังก์ชั่น (e) window.event; if ((e.wheeldelta <0 || e.detail> 0) && scrolltop> = 0 && scrolltop <ความสูง) {// เลื่อนลงโดยเบราว์เซอร์ที่แตกต่างกัน $ (document.body). if ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = ความสูง && scrolltop <= ความสูง+20) {// เลื่อนขึ้นโดยเบราว์เซอร์ที่แตกต่างกัน $ (document.body). if (document.addeventListener) {document.addeventListener ('dommousescroll', scrollfunc, false);} window.onmousewheel = document.onmousewheel = scrollfunc;ฉันทดสอบรหัสดังกล่าวใน IE และ Firefox แต่เหตุการณ์ Onmousewheel จะถูกเรียกใช้หลายครั้งภายใต้ Google เสมอ นี่เป็นสิ่งที่น่ารำคาญอย่างยิ่ง ทำไมจึงถูกกระตุ้นหลายครั้ง? หลังจากการดีบักฉันพบว่าทุกครั้งที่เราเลื่อนเมาส์เรามักจะเลื่อนครั้งละครั้งแทนที่จะเลื่อนช้าๆด้วยกริดเล็ก ๆ และกริดเล็ก ๆ สิ่งนี้นำไปสู่เหตุการณ์ Onmousewheel ที่ถูกกระตุ้นหลายครั้งเมื่อเลื่อนและฟังก์ชั่น ScrollFunc เมื่อฟังก์ชั่นการเคลื่อนไหวในฟังก์ชั่นไม่ได้ดำเนินการมันจะถูกเรียกอย่างต่อเนื่องเพื่อให้แถบเลื่อนไม่สามารถม้วนลงและหน้าไม่สามารถม้วนได้ ดังนั้นฉันเปลี่ยนรหัส JS ข้างต้นเป็นสิ่งต่อไปนี้:
$ (เอกสาร) .ready (function () {var height = $ (window) .height (); var scrollfunc = function (e) {document.onmousewheel = undefined; var scrolltop = document.body.scrolltop || documentelement.scrolltop; scrolltop> = 0 && scrolltop <ความสูง) {$ (document.body) .animate ({scrolltop: ความสูง}, "fast", "linear", ฟังก์ชั่น () {document.onmousewheel = scrollfunc;}); = scrollfunc;});} อื่นถ้า ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = ความสูง && scrolltop <= ความสูง+20) {$ (document.body) scrollfunc;}); $ (document.documentelement) .animate ({scrolltop: 0}, "fast", "linear", function () {document.onmousewheel = sclollfunc;});}}; if (document.addeventListener) {document.addeventListener ('dommousescroll', scrollfunc, false);} document.onmousewheel = scrollfunc;});ตกลงตอนนี้รหัสทำงานตามปกติ แต่เนื่องจากฉันเป็นสามเณรและรหัสไม่ได้เขียนอย่างประณีตพอฉันจึงได้รับการบอกเล่าจาก KK อีกครั้ง ตามพรอมต์ของเขาฉันแก้ไขรหัสซ้ำซ้อน:
$ (เอกสาร) .ready (function () {var height = $ (window) .height (); var width = $ (หน้าต่าง) .width (); var body; if (navigator.useragent.indexof ("firefox")> 0 || navigator.useragent.indexof ("msie") isfinish = true; var scrollfunc = function (e) {ถ้า (isfinish) {var scrolltop = body.scrolltop; e = e || window.event; ถ้า ((e.wheeldelta <0 || e.detail> 0) && scrolltop> = 0 && E.Detail <0) && scrolltop> = ความสูง && scrolltop <= ความสูง+20) {scroll (0);}}}; var scroll = ฟังก์ชั่น (ความสูง) {isfinish = false; $ (ร่างกาย). true;});}; if (navigator.useragent.indexof ("firefox")> 0) {ถ้า (document.addeventListener) {document.addeventListener ('dommousescroll', scrollfunc, false);ในที่สุดก็ได้รับรหัสสำหรับการแนะนำ ฉันต้องบอกว่าฉันได้เรียนรู้มากมายโดยการแก้ปัญหานี้ ในอนาคตเราต้องทำงานหนักขึ้นเพื่อเป้าหมายของ "เขียนน้อยลงทำมากขึ้น"! - -
หากมีอะไรผิดปกติกับการเขียนโปรดให้คำแนะนำจากอาจารย์ทุกคนและฉันจะเรียนรู้อย่างถ่อมตน