การเลื่อนช่วยให้ผู้ใช้สามารถดูเว็บเพจ/เอกสารขนาดยาวไปทางซ้ายและขวาหรือขึ้นและลงได้ สามารถทำได้โดยการเพิ่มแถบเลื่อนแนวนอนและแนวตั้งขึ้นอยู่กับเนื้อหา ขนาดของแถบเลื่อน เช่น ความสูงและความกว้างจะถูกตั้งค่าตามค่าเริ่มต้น อย่างไรก็ตาม สิ่งเหล่านี้สามารถปรับแต่งได้โดยใช้เมธอด JavaScript ที่เกี่ยวข้อง เมื่อสามารถเพิ่มหรือตั้งค่าลงในเอกสารแล้ว ผู้ใช้สามารถระบุได้อย่างง่ายดายโดยใช้ ' เลื่อนด้านบน () ', และ ' เลื่อนซ้าย() ” วิธีการ
โพสต์นี้จะอธิบายถึงวัตถุประสงค์และการทำงานของเมธอด “scrollLeft()” ใน jQuery
วิธีการ “scrollLeft()” ใน jQuery คืออะไร?
“ เลื่อนซ้าย() ” วิธีการนี้ออกแบบมาโดยเฉพาะสำหรับแถบเลื่อนแนวนอนเพื่อตั้งค่าและดึงตำแหน่งเป็นพิกเซล จะคำนวณตำแหน่งแถบเลื่อนองค์ประกอบ HTML ที่เลือก ส่วนใหญ่ใช้กับองค์ประกอบ div คอนเทนเนอร์ และส่วน
ไวยากรณ์ (กำหนดตำแหน่งแถบเลื่อนแนวนอน)
$ ( ตัวเลือก ) .scrollซ้าย ( ตำแหน่ง )
ไวยากรณ์ข้างต้นใช้ค่าจำนวนเต็มเป็น “ ตำแหน่ง ” อาร์กิวเมนต์เพื่อตั้งค่าตำแหน่งแถบเลื่อนแนวนอนของตัวเลือกเป้าหมาย
ไวยากรณ์ (รับตำแหน่งแถบเลื่อนแนวนอน)
$ ( ตัวเลือก ) .scrollซ้าย ( )
ไวยากรณ์นี้ส่งคืนค่าอาร์กิวเมนต์ 'ตำแหน่ง' ของตัวเลือกเป็นพิกเซล
มาใช้วิธีที่กำหนดไว้ในทางปฏิบัติ
รหัส HTML
ขั้นแรก ดูรหัส HTML ที่ระบุไว้:
< ส่วน สไตล์ = 'height:150px; width: 200px ;margin:auto;border:2px solid black; overflow: อัตโนมัติ;พื้นที่สีขาว: nowrap;' >
< ชั่วโมง2 > ยินดีต้อนรับสู่ลินุกซ์ชินท์ ! ชั่วโมง2 >
ส่วน >
< ปุ่ม > กำหนดตำแหน่ง ปุ่ม >
ในบรรทัดโค้ดด้านบน:
- “ <ส่วน> แท็ก ' มีส่วนภายในเอกสาร HTML ที่ปรับแต่งด้วยความช่วยเหลือของแอตทริบิวต์ 'style'
- ภายในส่วนที่สร้างขึ้น ' ” แท็กกำหนดหัวข้อย่อย
- สุดท้ายนี้ “ <ปุ่ม> ” แท็กเพิ่มปุ่ม
บันทึก: ทำตามโค้ด HTML ที่กำหนดในตัวอย่างทั้งหมดของโพสต์นี้
ตัวอย่างที่ 1: การใช้เมธอด “scrollLeft()” เพื่อกำหนดตำแหน่งแถบเลื่อน (แนวนอน)
ตัวอย่างนี้ใช้เมธอด “scrollLeft()” เพื่อตั้งค่าแถบเลื่อน (แนวนอน) ที่ตำแหน่งที่ระบุ
รหัส jQuery
ทำตามรหัส jQuery ที่กำหนด:
< สคริปต์ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > สคริปต์ >< สคริปต์ >
$ ( เอกสาร ) .พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) .คลิก ( การทำงาน ( ) {
$ ( 'ส่วน' ) .scrollซ้าย ( ห้าสิบ ) ;
} ) ;
} ) ;
สคริปต์ >
ในข้อมูลโค้ดนี้:
- ขั้นแรก ระบุเส้นทาง CDN ของไลบรารี jQuery ใน ' <สคริปต์> ” แท็กจากเว็บไซต์อย่างเป็นทางการ “ https://jquery.com/ ” ด้วยความช่วยเหลือของ “ src ' คุณลักษณะ.
- ถัดไป แท็ก “