เลื่อนเต็มหน้าอย่างราบรื่นด้วยปลั๊กอิน jQuery viewScroller.js

ผลการเลื่อน JavaScript เป็นเวลาหลายปีแล้วที่มีห้องสมุดดีๆมากมายให้เลือก แต่คู่แข่งรายใหม่ในสนามคือ viewScroller.js.

ห้องสมุดขนาดเล็ก แต่ทรงพลังสามารถสร้างได้ เค้าโครงหน้าเดียว ที่ เลื่อนเป็นบล็อก ด้วยการเลื่อนหนึ่งครั้งของล้อเลื่อน (หรือทัชแพด) สิ่งนี้จะสร้างเค้าโครงที่มีการควบคุมซึ่งการเลื่อนจะเลื่อนผู้ใช้ไปยังส่วนต่างๆของหน้าด้วย ความแม่นยำของพิกเซลแน่น.

โดยธรรมชาติแล้วนี่เป็นห้องสมุดที่ไม่มีค่าใช้จ่าย มีอยู่ใน GitHub และติดตั้งง่าย กับ Bower หรือ npm.

อย่างไรก็ตาม viewScroller.js คือ ไม่ ไลบรารี JavaScript อิสระ. มันพึ่งพา jQuery และสองปลั๊กอินเฉพาะ: jQuery Mousewheel และ jQuery ทำให้สบาย. เหล่านี้คือ ทั้งที่จำเป็น เพื่อให้เอฟเฟกต์การเลื่อนทำงานอย่างถูกต้อง.

สิ่งนี้สามารถขัดขวางค่าของ viewScroller เนื่องจากต้องการไลบรารี JS จำนวนหนึ่งเพื่อใช้งาน แต่ถ้าคุณใช้ jQuery อยู่แล้วล่ะก็มันไม่ใช่เกมง่ายๆ viewScroller.js เสนอวิธีที่ง่ายที่สุดในการรับ เลื่อนหน้าเว็บแอปเดียว ทำงานโดยไม่มีรหัสมาก.

มันอย่างไร, ใช้คลาสและ ID ที่มีรายละเอียดมาก เพื่อสร้างเอฟเฟกต์การเลื่อน คุณสามารถ แก้ไขคลาสเหล่านี้ ในไฟล์ CSS ของคุณเองหรือ เขียนทับพวกเขา ในรหัสฐาน คุณจะได้พบกับ รายการเต็มรูปแบบ ในหน้า repo ด้วย ชื่อคลาส และ ข้อมูลการตั้งค่าเริ่มต้น.

วิธีที่ง่ายที่สุดในการเริ่มต้นคือ การโคลนการสาธิต viewScroller. พวกเขามีหนึ่งที่มีแถบด้านข้างขวาอีกคนที่มีแถบด้านข้างซ้ายและหนึ่งที่มีสองแถบด้านข้างแซนวิชเนื้อหาตรงกลาง.

หากคุณโอเคกับเว็บแอป jQuery ที่เติมเชื้อเพลิงให้แล้ว viewScroller เป็นห้องสมุดฟรีที่น่าใช้ มันต้องการ การพึ่งพาค่อนข้างน้อย แต่พวกเขาไม่ควรกำหนดค่ายาก.

ลองดูที่ การสาธิตสด และดูสิ่งที่คุณคิด หากคุณชอบ UX และพฤติกรรมการเลื่อนให้ทำตาม คู่มือการติดตั้งบน GitHub ที่จะเริ่มต้น.