ล่าสุดบัญชีสาธารณะของบริษัทพัฒนา H5 มีฟังก์ชั่นการคลิกไอคอนเพื่อเลื่อนไปด้านบน ฟังก์ชั่นนี้ค่อนข้างใช้งานง่าย เพียงเรียก window.scrollTo(0, 0) โดยตรงและกรอกโค้ดให้ครบถ้วนในบรรทัดเดียว แต่ในฐานะสิงโตที่ถูกล้อม ฉันจะมีข้อกำหนดที่ต่ำสำหรับตัวเองได้อย่างไร ดังนั้นฉันจึงเพิ่มข้อกำหนดสำหรับตัวเองในการตระหนักถึงฟังก์ชั่นการเลื่อนหน้าไปด้านบนอย่างราบรื่น หลังจากการวิจัยและตรวจสอบเอกสารแล้ว เรามีทางเลือก 3 ทางดังต่อไปนี้
1. ใช้ CSSฟังก์ชันระดับสูงสุดสามารถทำได้โดยใช้ CSS เท่านั้น รหัสมีดังนี้:
html { พฤติกรรมการเลื่อน: ราบรื่น;}ฟังก์ชันของสไตล์นี้คือการระบุพฤติกรรมการเลื่อนสำหรับองค์ประกอบที่มีแถบเลื่อน แต่จะมีผลเฉพาะเมื่อผู้ใช้นำทางด้วยตนเองหรือ API การเลื่อน CSSOM ทริกเกอร์การเลื่อน และไม่ส่งผลต่อการเลื่อนที่เกิดจากพฤติกรรมของผู้ใช้ ตอนที่ฉันกำลังเฉลิมฉลอง ฉันเปิดขึ้นมาว่าฉันสามารถใช้และตรวจสอบความเข้ากันได้ได้หรือไม่:
ให้ตายเถอะ มานำไปใช้กับ JS กันดีกว่า
2. ใช้ Window.scrollTo APIเราทุกคนรู้ดีว่า window.scrollTo(x, y) ตระหนักถึงฟังก์ชันการเลื่อนไปยังตำแหน่งใดตำแหน่งหนึ่งบนเพจโดยส่งผ่านพิกัดแกน x และ y ในเอกสาร API นี้สามารถส่งผ่านตัวเลือกซึ่งเป็นวัตถุได้จริง ค่าด้านซ้ายสอดคล้องกับ x ในพิกัด ค่าด้านบนสอดคล้องกับ y ในพิกัด และยังมีค่าของลักษณะการทำงานด้วย ซึ่งช่วยให้คุณปรับแต่ง พฤติกรรมการเลื่อน จากนั้นเราจะใช้การเลื่อนเช่นนี้ไปด้านบน:
window.scrollTo ({ ซ้าย: 0, ด้านบน: 0, พฤติกรรม: 'ราบรื่น'})กลิ่นหอมมาก เสร็จแล้วค่ะ ไม่กี่วันต่อมา ผู้จัดการผลิตภัณฑ์มาหาฉันพร้อมดาบยาว 5 เมตร และบอกว่าเอฟเฟกต์การเลื่อนบน Safari นั้นแปลกและการตรวจร่างกายก็แย่มาก ดังนั้นฉันจึงเปิดเอกสาร MDN อย่างเงียบ ๆ และเลื่อนไปที่ด้านล่าง:
เมื่อเห็นภาพนี้ แม้ว่าเบราว์เซอร์ API เกือบทั้งหมดจะรองรับ แต่ตัวเลือกตัวเลือกก็วางสายบน Safari โดยตรง ดังนั้นฉันจึงเปิด Stackoverflow อีกครั้งและสรุปวิธีแก้ปัญหาขั้นสุดท้าย
3. ใช้ requestAnimationFrameฉันมักจะเห็น requestAnimationFrame ที่มีชื่อเสียง แต่ฉันไม่เคยมีโอกาสได้ใช้มันเลย เรารู้ว่าฟังก์ชันของ requestAnimationFrame คือการบอกให้เบราว์เซอร์ดำเนินการฟังก์ชันการโทรกลับที่ส่งผ่านก่อนที่จะวาดใหม่ครั้งถัดไป เบราว์เซอร์จะกระทำพฤติกรรมนี้ให้คุณโดยอัตโนมัติ ดังนั้นเราจึงมีรหัสต่อไปนี้:
const scrollToTop = () => { ให้ scrollTop = document.documentElement.scrollTo ||. document.body.scrollTop ถ้า (scrollTop > 0) { window.requestAnimationFrame (scrollTop) window.scrollTop (0, scrollTop - scrollTo / 8) }}เสร็จแล้ว! - - สมบูรณ์แบบ! - - ในขณะที่ตื่นเต้น ฉันเปิดใช้งาน ฉันสามารถใช้เพื่อตรวจสอบความเข้ากันได้ของ requestAnimationFrame หรือไม่:
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network