js原生は内容エリアが最終部にスクロールするかどうかを判断する.
5161 ワード
論理
内容のスクロールを判断するには知っておくべき情報があります.コンテンツ領域の真の高さ(つまりスクロール領域) スクロールバーは上の位置 から離れています.コンテンツ領域の可視高さ それぞれ次の三つのAPIに対応する.
element.scrollHeightは元素の内容の高さを取得し、【読み取り専用の属性】element.scrollTopは要素のオフセット値を取得または設定でき、スクロールバーの位置を計算します.一つの要素の容器が垂直方向のスクロールバーを発生しない場合、そのscrollTopの値はデフォルトで0.element.clientHeight読み取り要素の可視高さ【読み取り専用属性】
以下は直接MDNの上の1つの経典の公式を引用します.
元素が最後までスクロールされているかどうかを判定します.
もし元素が最後までスクロールしたら、次の式はtrueに戻ります.ない場合はfalseに戻ります.
element.scrollHeight-element.scrollTop==element.client Height
ケース-ユーザ使用プロトコル
ユーザーが契約書を読み終わったら、同意をクリックすることができます.つまり、スクロールバーの最後の部分が終わったら、読み終わったということです.
内容のスクロールを判断するには知っておくべき情報があります.
element.scrollHeightは元素の内容の高さを取得し、【読み取り専用の属性】element.scrollTopは要素のオフセット値を取得または設定でき、スクロールバーの位置を計算します.一つの要素の容器が垂直方向のスクロールバーを発生しない場合、そのscrollTopの値はデフォルトで0.element.clientHeight読み取り要素の可視高さ【読み取り専用属性】
以下は直接MDNの上の1つの経典の公式を引用します.
元素が最後までスクロールされているかどうかを判定します.
もし元素が最後までスクロールしたら、次の式はtrueに戻ります.ない場合はfalseに戻ります.
element.scrollHeight-element.scrollTop==element.client Height
ケース-ユーザ使用プロトコル
ユーザーが契約書を読み終わったら、同意をクリックすることができます.つまり、スクロールバーの最後の部分が終わったら、読み終わったということです.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabtitle>
<style>
textarea{height: 200px;width: 300px}
style>
head>
<body>
<p>
<textarea>
、
1、 （ “ ”） （ “ ”） 。 ， 。
2、 ， / ， ， 、 。 ， 15 。 ， 。 ， ， 。 。 。
3、 ， ， 。
4、 ， ， 。
5、 。 ， 。
6、 、 ， 。
textarea>
p>
<p>
<input type="checkbox" value="1" disabled="disabled">
p>
<script>
// checkbox
var checkbox=document.querySelector('input[type=checkbox]');
document.querySelector('textarea').addEventListener('scroll',function () {
// （ ）
// console.log(this.scrollHeight);
//
// console.log(this.scrollTop);
//
// this.scrollTop=800;
//
// console.log(this.clientHeight)
// - === ( ) ， ，
if(this.scrollHeight-this.scrollTop===this.clientHeight){
console.log(" ");
// disabled
checkbox.removeAttribute('disabled')
}
})
script>
body>
html>