JS กำหนดว่าแถบเลื่อนมาถึงอินสแตนซ์ด้านล่างหรือบนสุดของหน้าเว็บ

บทความนี้อธิบายวิธีการของ JS เพื่อตรวจสอบว่าแถบเลื่อนได้มาถึงด้านล่างหรือด้านบนของหน้าหรือไม่ แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:

เรามักจะเห็นเว็บไซต์จำนวนมากที่กลับไปที่เอฟเฟกต์ด้านบนคือเมื่อเราเลื่อนแถบไปยังตำแหน่งที่ระบุมันจะกลับมาที่ด้านบนมิฉะนั้นจะถูกซ่อนไว้โดยอัตโนมัติ ให้ฉันแนะนำหลักการและวิธีการใช้ผลกระทบนี้

เมื่อพื้นที่ที่มองเห็นมีขนาดเล็กกว่าความสูงที่แท้จริงของหน้าจะพิจารณาแล้วว่าแถบเลื่อนจะปรากฏขึ้นนั่นคือ:

การคัดลอกรหัสมีดังนี้: ถ้า (document.documentelement.clientheight <document.documentelement.offSetheight) Scroll = true;

หากต้องการใช้ document.documentElement คุณต้องเพิ่มการประกาศที่หัวของหน้า:

คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

ในความเป็นจริงรหัสนี้ไม่ทำงานเพราะไม่ได้พิจารณาปัญหานั่นคือเส้นขอบเบราว์เซอร์ เมื่อเราได้รับความสูงออฟเซทหน้าของหน้าจะมีเส้นขอบเบราว์เซอร์ เส้นขอบเบราว์เซอร์คือ 2 พิกเซลดังนั้นในกรณีใดก็ตามที่ไคลเอนต์เฮทมีขนาดเล็กกว่าความสูงเกินจริงซึ่งทำให้มันเป็นจริงแม้จะไม่มีแถบเลื่อน ดังนั้นเราต้องแก้ไขข้อผิดพลาดนี้ รหัสควรมีการเปลี่ยนแปลงเช่นนี้และลบ 4 พิกเซลในระดับสูงนั่นคือ:

คัดลอกรหัสรหัสดังต่อไปนี้: if (document.documentElement.Clientheight <document.documentElement.offSetheight-4) {

// เรียกใช้สคริปต์ที่เกี่ยวข้อง

-

นอกจากนี้เราต้องคิดออกที่นี่ว่ารหัสด้านบนตัดสินแถบเลื่อนแนวนอน โดยทั่วไปเราจำเป็นต้องตัดสินการเลื่อนแนวตั้งรหัสมีดังนี้:

คัดลอกรหัสดังต่อไปนี้: ถ้า (document.documentElement.ClientWidth <document.documentElement.offsetWidth-4) {

// เรียกใช้สคริปต์ที่เกี่ยวข้อง

-

ในการตรวจสอบว่าแถบเลื่อนถูกดึงไปที่ด้านล่างของหน้าคุณสามารถใช้รหัสต่อไปนี้ได้

คัดลอกรหัสดังนี้: window.onscroll = function () {

var marginBot = 0;

if (document.documentelement.scrolltop) {

marginbot = document.documentelement.scrollheight (document.documentelement.scrolltop+document.body.scrolltop) -document.documentelement.clientheight;

} อื่น {

marginbot = document.body.scrollheight document.body.scrolltop- document.body.clientheight;

-

if (marginBot <= 0) {

// ทำอะไรบางอย่าง

-

-

ตัวอย่างที่ 2

กำลังมองหาออนไลน์ เบราว์เซอร์เข้ากันได้มาก น่าแปลกที่ฉันไม่พบข้อมูลที่เกี่ยวข้องในเอกสาร โพสต์รหัส

คัดลอกรหัสดังนี้:/************************

* ใช้ความสูงของแถบเลื่อนหน้าต่าง

-

ฟังก์ชั่น getScrolltop ()

-

var scrolltop = 0;

if (document.documentelement && document.documentelement.scrolltop)

-

scrolltop = document.documentelement.scrolltop;

-

อื่นถ้า (document.body)

-

scrolltop = document.body.scrolltop;

-

กลับ scrolltop;

-

-

* ใช้ความสูงของช่วงภาพของหน้าต่าง

-

ฟังก์ชั่น getClientheight ()

-

var clientHeight = 0;

if (document.body.clientheight && document.documentelement.clientheight)

-

var clientHeight = (document.body.clientheight <document.documentelement.clientheight)? document.body.clientheight: document.documentelement.clientheiight;

-

อื่น

-

var clientHeight = (document.body.clientheight> document.documentelement.clientheight)? document.body.clientheight: document.documentelement.clientheiight;

-

ส่งคืนไคลเอ็นต์

-

-

* ใช้ความสูงที่แท้จริงของเนื้อหาเอกสาร

-

ฟังก์ชั่น getScrollheight ()

-

ส่งคืน math.max (document.body.scrollheight, document.documentelement.scrollheight);

-

ฟังก์ชั่นทดสอบ () {

ถ้า (getScrolltop ()+getClientHeight () == getScrollheight ()) {

การแจ้งเตือน ("ไปถึงด้านล่าง");

}อื่น{

การแจ้งเตือน ("ไม่ถึงด้านล่าง");

-

-

เติมเต็ม:

DTD ได้ประกาศ:

เช่น

document.documentelement.scrollheight ความสูงเนื้อหาทั้งหมดของเบราว์เซอร์, document.body.scrollheight ความสูงเนื้อหาทั้งหมดของเบราว์เซอร์

document.documentelement.scrolltop The Browser Scrolls ความสูงชิ้นส่วน, document.body.scrolltop อยู่เสมอ 0

document.documentelement.clientheight ความสูงส่วนที่มองเห็นได้ของเบราว์เซอร์, document.body.clientheight ความสูงของเนื้อหาของเบราว์เซอร์

FF

document.documentelement.scrollheight ความสูงเนื้อหาทั้งหมดของเบราว์เซอร์, document.body.scrollheight ความสูงเนื้อหาทั้งหมดของเบราว์เซอร์

document.documentelement.scrolltop The Browser Scrolls ความสูงชิ้นส่วน, document.body.scrolltop อยู่เสมอ 0

document.documentelement.clientheight ความสูงส่วนที่มองเห็นได้ของเบราว์เซอร์, document.body.clientheight ความสูงของเนื้อหาของเบราว์เซอร์

โครเมี่ยม

document.documentelement.scrollheight ความสูงเนื้อหาทั้งหมดของเบราว์เซอร์, document.body.scrollheight ความสูงเนื้อหาทั้งหมดของเบราว์เซอร์

document.documentelement.scrolltop อยู่เสมอ 0, document.body.scrolltop เบราว์เซอร์การเลื่อนส่วนสูงชิ้นส่วน

document.documentelement.clientheight ความสูงส่วนที่มองเห็นได้ของเบราว์เซอร์, document.body.clientheight ความสูงของเนื้อหาของเบราว์เซอร์

DTD ไม่ได้ประกาศ:

เช่น

document.documentelement.scrollheight ความสูงของส่วนที่มองเห็นได้ของเบราว์เซอร์, document.body.scrollheight ความสูงของเนื้อหาทั้งหมดของเบราว์เซอร์

document.documentelement.scrolltop อยู่เสมอ 0, document.body.scrolltop เบราว์เซอร์การเลื่อนส่วนสูงชิ้นส่วน

document.documentelement.clientheight อยู่เสมอ 0, document.body.clientheight ความสูงส่วนที่มองเห็นได้ของเบราว์เซอร์

FF

document.documentelement.scrollheight ความสูงของส่วนที่มองเห็นได้ของเบราว์เซอร์, document.body.scrollheight ความสูงของเนื้อหาทั้งหมดของเบราว์เซอร์

document.documentelement.scrolltop อยู่เสมอ 0, document.body.scrolltop เบราว์เซอร์การเลื่อนส่วนสูงชิ้นส่วน

document.documentelement.clientheight ความสูงของเนื้อหาทั้งหมดของเบราว์เซอร์, document.body.clientheight ความสูงของส่วนที่มองเห็นได้ของเบราว์เซอร์

โครเมี่ยม

document.documentelement.scrollheight ความสูงของส่วนที่มองเห็นได้ของเบราว์เซอร์, document.body.scrollheight ความสูงของเนื้อหาทั้งหมดของเบราว์เซอร์

document.documentelement.scrolltop อยู่เสมอ 0, document.body.scrolltop เบราว์เซอร์การเลื่อนส่วนสูงชิ้นส่วน

document.documentelement.clientheight ความสูงของเนื้อหาทั้งหมดของเบราว์เซอร์, document.body.clientheight ความสูงของส่วนที่มองเห็นได้ของเบราว์เซอร์

ความสูงของเนื้อหาทั้งหมดของเบราว์เซอร์คือความสูงของเฟรมเวิร์กเบราว์เซอร์ทั้งหมดรวมถึงผลรวมของความสูงของแถบเลื่อนม้วนส่วน + ส่วนภาพ + ส่วนที่ซ่อนอยู่ที่ด้านล่าง

ความสูงของส่วนเบราว์เซอร์ม้วนส่วนคือของแถบเลื่อนม้วนออกส่วนหนึ่งของความสูงเพื่อดูความสูงของด้านบนของวัตถุทั้งหมด

หลังจากทำความเข้าใจกับพารามิเตอร์ข้างต้นเราสามารถสร้างเอฟเฟกต์การเลื่อนที่เข้ากันได้กับเบราว์เซอร์ IE, FF และ Chrome

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน