Bagaimana untuk memahami skrol-Keselamatan-php.cn

Lebar dan ketinggian tatal

scrollHeight

scrollHeight mewakili jumlah ketinggian elemen, termasuk bahagian halimunan yang tidak boleh dipaparkan pada halaman web kerana limpahan

scrollWidth

scrollWidth mewakili jumlah lebar elemen, termasuk bahagian halimunan yang tidak boleh dipaparkan pada halaman web kerana limpahan

[ Nota] Nilai pulangan penyemak imbas IE7 tidak tepat

　【1】Apabila tiada bar skrol, hasil atribut scrollHeight dan clientHeight adalah sama dan hasil atribut scrollWidth dan clientWidth adalah sama

rreee

　【2】Apabila terdapat bar skrol, tetapi lebar dan tinggi elemen ditetapkan menjadi lebih besar daripada atau sama dengan Apabila lebar dan tinggi kandungan elemen adalah sama, hasil tatal dan atribut klien adalah sama

<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>

Salin selepas log masuk

[3] Terdapat bar skrol, tetapi lebar dan ketinggian tetapan elemen adalah lebih kecil daripada lebar dan ketinggian kandungan elemen, iaitu, apabila kandungan melimpah, atribut skrol lebih besar daripada klien Harta

[Nota] Terdapat masalah keserasian dengan sifat scrollHeight Dalam pelayar chrome dan safari, scrollHeight mengandungi padding-bottom; IE dan firefox tidak mengandungi padding-bottom Saiz halaman

　document.documentElement.clientHeight mewakili saiz kawasan kelihatan halaman, manakala document.documentElement.scrollHeight mewakili saiz sebenar kandungan elemen html. Walau bagaimanapun, disebabkan prestasi berbeza setiap penyemak imbas, ia dibahagikan kepada situasi berikut

[1] Apabila elemen html tidak mempunyai bar skrol, klien dan atribut skrol IE dan Firefox sentiasa sama, dan saiz kawasan visual dikembalikan; manakala safari dan chrome berkelakuan seperti biasa, clientHeight mengembalikan saiz kawasan yang boleh dilihat, dan scrollHeight mengembalikan saiz kandungan elemen

<div id="test" >
    内容<br>内容<br></div><script>//103(120-17) 103(120-17)console.log(test.scrollHeight,test.scrollWidth);//103(120-17) 103(120-17)console.log(test.clientHeight,test.clientWidth);</script>

Salin selepas log masuk

[2] Apabila elemen html mempunyai bar skrol, semua penyemak imbas berkelakuan seperti biasa. clientHeight menyediakan saiz kawasan viewport, manakala scrollHeight menyediakan saiz kandungan elemen

<div id="test" >
    内容</div><script>//chrome/safari:220(200+10+10)//firefox/IE:210(200+10)console.log(test.scrollHeight);//103(120-17)console.log(test.clientHeight);</script>

Salin selepas log masuk

serasi

Oleh itu, apabila anda ingin mendapatkan ketinggian sebenar dokumen, anda perlu mendapatkan < Nilai maksimum scrollHeight dan clientHeight bagi elemen html> atribut mewakili bilangan piksel yang tersembunyi di atas kawasan kandungan . Apabila elemen tidak ditatal, nilai scrollTop ialah 0. Jika elemen ditatal secara menegak, nilai scrollTop adalah lebih besar daripada 0 dan mewakili lebar piksel kandungan halimunan di atas elemen

scrollLeft

Atribut scrollLeft menunjukkan bilangan piksel yang tersembunyi di sebelah kiri kawasan kandungan. Apabila elemen tidak ditatal, nilai scrollLeft ialah 0. Jika elemen ditatal secara mendatar, nilai scrollLeft lebih besar daripada 0 dan mewakili lebar piksel kandungan halimunan di sebelah kiri elemen Apabila bar skrol menatal ke bahagian bawah kandungan, Mematuhi persamaan berikut

//firefox:  755 755//chrome:   947 8(body元素的margin)//safari:   744 8(body元素的margin)//IE:       768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)

Salin selepas log masuk

rrree

Tidak seperti sifat scrollHeight dan scrollWidth, scrollLeft dan scrollTop boleh ditulis

[Nota] Apabila memberikan nilai negatif untuk tatalKiri dan tatal Atas, tiada ralat akan dilaporkan, tetapi gagal secara senyap

<body ><script>//firefox:  755 1016(1000+8*2)//chrome:   947 1016(1000+8*2)//safari:   744 1016(1000+8*2)//IE:       768 1016(1000+8*2)console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)</script>

Salin selepas log masuk

Tatal halaman

Secara teorinya, tatal halaman boleh dicerminkan dan dikawal melalui document.documentElement.scrollTop dan scrollLeft; walau bagaimanapun, pelayar chrome dan safari menggunakan document.body .scrollTop dan scrollLeft dikawal oleh

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth  = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

Salin selepas log masuk

Oleh itu, keserasian ketinggian tatal halaman ditulis sebagai

rreee

Kembali ke bahagian atas

Boleh dicapai menggunakan scrollTop Kembali ke fungsi atas

scrollHeight == scrollTop  + clientHeight

Salin selepas log masuk

<div id="test" >
    内容</div><button id=&#39;btn1&#39;>点击</button><div id="result"></div><script>btn1.onclick = function(){
    result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}</script>

Salin selepas log masuk

Terdapat dua sifat baca sahaja tetingkap yang boleh mendapatkan nilai piksel bagi keseluruhan halaman menatal, ia ialah pageXOffset dan pageYOffset

pageXOffset

pageXOffset mewakili nilai piksel halaman yang menatal ke arah mendatar

pageYOffset

pageYOffset mewakili nilai piksel halaman yang menatal dalam arah menegak [ Nota] IE8-browser tidak menyokong

<div id="test" >
    内容</div><button id=&#39;btn1&#39;>向下滚动</button><button id=&#39;btn2&#39;>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>

Salin selepas log masuk

kaedah tatal

scrollTo(x,y)

kaedah skrolTo(x,y) untuk menatal semasa Untuk dokumen yang dipaparkan dalam tetingkap, biarkan titik yang ditentukan oleh koordinat x dan y dalam dokumen terletak di penjuru kiri sebelah atas kawasan paparan

<body ><button id=&#39;btn1&#39; >点击</button><div id="result" ></div><script>btn1.onclick = function(){
    result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}</script>    </body>

Salin selepas log masuk

scrollBy(x,y)

scrollBy( Kaedah x, y) menatal dokumen yang dipaparkan dalam tetingkap semasa . x dan y nyatakan jumlah relatif penatalan

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop

Salin selepas log masuk

[Aplikasi kecil]

Gunakan scrollBy() tambah pemasa setInterval untuk mencapai fungsi Tatal yang mudah dan pantas

function scrollTop(){    if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}

Salin selepas log masuk

scrollIntoView()

　Kaedah Element.scrollIntoView menatal elemen semasa ke dalam kawasan penyemak imbas yang boleh dilihat

Kaedah ini boleh menerima nilai Boolean sebagai parameter. Jika benar, ini bermakna bahagian atas elemen diselaraskan dengan bahagian atas bahagian yang boleh dilihat pada kawasan semasa (dengan syarat kawasan semasa boleh ditatal jika ia palsu, ini bermakna bahagian bawah elemen adalah sejajar dengannya); ekor bahagian yang boleh dilihat pada kawasan semasa (dengan syarat kawasan semasa boleh ditatal) ). Jika parameter ini tidak disediakan, lalai adalah benar

<body >
<button id=&#39;btn&#39; >回到顶部</button>
<script>function scrollTop(){    if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}
btn.onclick = scrollTop;</script>
</body>

Salin selepas log masuk

scrollIntoViewIfNeeded()

Kaedah scrollIntoViewIfNeeded(true) hanya berfungsi apabila elemen semasa tidak kelihatan dalam viewport. Tatal tetingkap penyemak imbas atau elemen bekas sehingga ia kelihatan. Jika elemen semasa kelihatan dalam viewport, kaedah ini tidak melakukan apa-apa

Apabila parameter alignCenter ditetapkan kepada benar, elemen akan dipaparkan secara menegak di tengah viewport yang mungkin

[Nota ]Kaedah ini hanya disokong oleh chrome dan safari

<body ><button id=&#39;btn1&#39; >点击</button><div id="result" ></div><script>btn1.onclick = function(){
    result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}</script>    </body>

Salin selepas log masuk

scrollByLines(lineCount)

　　scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值，也可以是负值

　　[注意]该方法只有safari支持

<div id="test" >
    内容</div><button id=&#39;btn1&#39;>向下滚动</button><button id=&#39;btn2&#39;>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>

Salin selepas log masuk

scrollByPages(pageCount)

　　scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定

　　[注意]该方法只有safari支持

<div id="test" >
    内容</div><button id=&#39;btn1&#39;>向下滚动</button><button id=&#39;btn2&#39;>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>

Salin selepas log masuk

滚动事件

在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上

<body ><div id="result" ></div><script>window.onscroll = function(){
    result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script>    </body>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk memahami skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!