スクロールの変換はスクロールを意味します。スクロールの関連するプロパティを使用して、要素のサイズやスクロール距離などを取得できます。
スクロールの関連プロパティ：
-
element.scrollTop：スクロール後に上にスクロールされた距離を返します。戻り値には単位がありません
-
element.scrollLeft：スクロール後の左への距離を返します。戻り値には単位がありません
-
element.scrollWidth：それ自体の実際の幅を返します（パディングを含み、境界線を除く）
-
element.scrollHeight：それ自体の実際の高さを返します（パディングを含み、境界線を除く）
ここでは主にelement.scrollTopと element.scrollHeightを学習 しますが、他の2つは同じです
1つ： element.scrollHeight：
それ自体の実際の高さ（パディングを含む、境界線を除く）を返します。戻り値は単位なしです。主に、コンテンツがボックスのサイズを超えてオーバーフローした場合、戻り値にはオーバーフローの高さが含まれます。
たとえば、次の状況です。
このとき、このメソッドを使用して返すのは、ボックスサイズ200ではなく、オーバーフロー部分の高さです。
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
background-color: rgb(255, 215, 105);
}
</style>
</head>
<body>
<div>我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友</div>
<script>
var div=document.querySelector('div');
console.log(div.scrollHeight);
</script>
</body>
2：element.scrollTop：
スクロール後にロールアップされた距離を返します。戻り値には単位がありません。ここで説明するスクロールはオーバーフロー状況用です。多くの場合、オーバーフローをスタイルに追加します。これは、ボックスにスクロールバーを追加するためのものです。スクロールバーを動かすとあふれている部分が表示されるので、この時点で返される値は、スクロールバーをドラッグした後、コンテンツが比較的上に移動し、戻り値は上に移動する部分の高さです。
（ただし、ここではイベントも追加する必要があります。スクロールイベント、つまり、スクロールバーをドラッグするとトリガーされます）
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
background-color: rgb(255, 215, 105);
overflow: auto; //滚动条
}
</style>
</head>
<body>
<div>我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友</div>
<script>
var div=document.querySelector('div');
div.addEventListener('scroll',function(){ //拖动滚条就会触发事件
console.log(div.scrollTop);
})
</script>
</body>スクロールバーをドラッグする過程で、イベントがトリガーされ、その出力 element.scrollTopの値が変化し続け、この値がボックスの上にドラッグされた高さであることがわかります。
また、これは要素のスクロールされた高さであることに注意してください。ページのスクロールされた高さを取得する場合は、window.pageYOffsetと記述する必要があります。