スクロールの見方
スクロールの幅と高さ
scrollHeight
スクロール高さは、オーバーフローにより Web ページに表示できない非表示の部分を含む、要素の合計の高さを表します。
scrollWidth
scrollWidth は、オーバーフローにより Web ページに表示できない非表示の部分を含む要素の合計幅を表します。
[注記] ] IE7 - ブラウザの戻り値が不正確です 's
【1】スクロールバーがない場合、scrollHeight 属性と clientHeight 属性は等しく、scrollWidth 属性と clientWidth 属性も等しくなります。
【2】スクロールバーはあるが、要素の幅と高さが以上に設定されている場合 要素内容の幅と高さが等しい場合、スクロール属性とクライアント属性は等しい 属性 [注意]scrollHeight 属性には互換性の問題があります。Chrome および Safari ブラウザでは、scrollHeight に padding-bottom が含まれますが、IE および Firefox には padding-bottom が含まれません<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>
<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>
<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>
scrollTop
スクロールトップ属性を取得する必要があります。コンテンツ領域の上に隠れているピクセルの数を示します。要素がスクロールされていない場合、scrollTop の値は 0 です。要素が垂直にスクロールされる場合、scrollTop の値は 0 より大きく、要素の上にある非表示のコンテンツのピクセル幅を表しますscrollLeft
scrollLeft プロパティは、コンテンツ領域の左側に隠れているピクセル数を示します。要素がスクロールされていない場合、scrollLeft の値は 0 です。要素が水平にスクロールされる場合、scrollLeft の値は 0 より大きく、要素の左側にある非表示のコンテンツのピクセル幅を表します
スクロールバーがコンテンツの一番下までスクロールする場合、次の式に従います//firefox: 755 755//chrome: 947 8(body元素的margin)//safari: 744 8(body元素的margin)//IE: 768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
<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>
【注意】負の値を代入する場合理論的には、ページのスクロールは document.documentElement.scrollTop および document.documentElement.scrollTop によって反映および制御できます。ただし、Chrome および Safari ブラウザは document.body を使用します。scrollTop とscrollLeft は
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
scrollHeight == scrollTop + clientHeight
として記述されます。 the top
これは、scrollTop を使用することで実現できます。 先頭に戻る function<div id="test" >
内容</div><button id='btn1'>点击</button><div id="result"></div><script>btn1.onclick = function(){
result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}</script><div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>pageXOffset
pageXOffset は水平方向にスクロールするページのピクセル値を表しますpageYOffset
pageYOffset は、垂直方向にスクロールするページのピクセル値を表します。 [注意] IE8 ブラウザは<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}</script> </body>scrollTo(x,y)
scrollTo(x,y) メソッドは、現在ウィンドウに表示されているドキュメントをスクロールします。ドキュメント内の座標 x と y で指定された点を次の位置に置きます。表示領域の左上隅
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
scrollBy(x,y)
scrollBy( x, y) メソッドは、現在のウィンドウに表示されているドキュメントをスクロールします。 x と y は相対的なスクロール量を指定します。function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}ログイン後にコピー
[小規模アプリケーション]function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}シンプルかつ高速なスクロール関数を実現するには、scrollBy() と setInterval タイマーを使用します。
<body >
<button id='btn' >回到顶部</button>
<script>function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
btn.onclick = scrollTop;</script>
</body>scrollIntoView()
Element.scrollIntoView メソッドは、現在の要素をブラウザの表示領域にスクロールします。
このメソッドはパラメータとしてブール値を受け取ることができます。 true の場合、要素の上部が現在の領域の表示部分の上部と位置合わせされることを意味します (現在の領域がスクロール可能である場合)。false の場合、要素の下部が現在の領域の表示部分の上部と位置合わせされることを意味します。現在の領域の表示されている部分の末尾 (現在の領域がスクロール可能な場合)。このパラメータが指定されていない場合、デフォルトは true<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}</script> </body>scrollIntoViewIfNeeded()
です。scrollIntoViewIfNeeded(true) メソッドは、現在の要素がビューポート: ブラウザ ウィンドウまたはコンテナ要素が表示されるまでスクロールします。現在の要素がビューポートに表示されている場合、このメソッドは何も行いません。alignCenter パラメータが true に設定されている場合、要素は可能な限りビューポートの垂直方向の中央に表示されます
[注意]このメソッドはchromeとsafariでのみサポートされています<body ><button id='btn' >滚动</button><script>btn.onclick = function(){scrollTo(0,0);}</script>scrollByLines(lineCount)
scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>scrollByPages(pageCount)
scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>滚动事件
在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上
<body ><div id="result" ></div><script>window.onscroll = function(){
result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script> </body>以上がスクロールの見方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7489
15
1377
52
77
11
19
41
スクロールボタンとは何ですか？
Feb 22, 2023 pm 02:29 PM
スクロールはスクロール ロック キー、コンピュータ キーボードのファンクション キーです。 WordやExcelでよく使われるスクロールキーですが、Scroll Lockをオフにしてページめくりキーを使用するとセルの選択範囲が移動しますが、Scroll Lockキーを押しても選択範囲は移動しません。 .細胞の。
キーボードのスクロール ライトは何を意味しますか?
Feb 20, 2023 pm 01:42 PM
キーボードのスクロール ライトの点灯は、「Scroll Lock」が有効になっていることを意味します。Win システムでは Scroll Lock キーは使用されませんが、一部のソフトウェアではこのファンクション キーが使用されます。このキーを押した後、Excel の上下キーはロックされます。スクロール: カーソルがページをスクロールします。このキーを放すと、上下キーを押すと、ページをスクロールせずにカーソルがスクロールします。
スクロールの見方
May 23, 2023 pm 01:40 PM
スクロールの幅と高さscrollHeightscrollHeightは、オーバーフローによりWebページに表示できない非表示の部分を含む、要素の合計の高さを表します。scrollWidthscrollWidthは、Webページに表示できない非表示の部分を含む、要素の合計の幅を表しますページオーバーフローによるページ [注意] IE7-Browser 戻り値が不正確 [1] スクロールバーがない場合、scrollHeight 属性と clientHeight 属性が等しく、scrollWidth 属性と clientWidth 属性が等しい //120120console.log(test.scrollHeight 、テスト
v-on:scroll を使用して Vue でスクロール イベントをリッスンする方法
Jun 11, 2023 pm 12:14 PM
Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、一般的なイベント監視に加えて、スクロール イベントを監視するための命令 (v-on:scroll) も提供します。この記事では、v-on:scroll を使用して Vue でスクロール イベントをリッスンする方法を詳しく紹介します。 1. v-on:scroll 命令の基本的な使い方 v-on:scroll 命令は、DOM 要素のスクロールイベントを監視するために使用されます。その基本的な使い方は次のとおりです。
CSSでスクロールを非表示にする方法
Jan 28, 2023 pm 02:02 PM
CSS でスクロールを非表示にする方法: 1. Firefox では、「scrollbar-width: none; /* Firefox */」属性を使用してスクロール バーを非表示にできます。 2. IE ブラウザでは、「-ms-prefix」を使用できます。 " 属性 スクロール バーのスタイルを定義します。 3. Chrome と Safari では、CSS スクロール バー セレクターを使用し、「display:none」で非表示にすることができます。
Ethereum Scrollとは何ですか？ Ethereum Scrollの操作方法は？
Feb 15, 2025 pm 10:33 PM
Ethereum Scrollは、シャードとZK-Rollupテクノロジーを介してイーサリアムネットワークのスケーラビリティを改善するために設計されたレイヤー2スケーリングソリューションです。これら2つのテクノロジーを組み合わせて、トランザクションを並行して処理し、効率的に検証するため、ネットワークスループットとトランザクション料金の削減が大幅に改善されます。スクロールは、イーサリアム仮想マシン（EVM）の互換性のある拡張レイヤーとして設計されており、ユーザーがトランザクションを迅速かつ経済的に処理できるようにします。
急成長しているゼロ知識レイヤー 2 ネットワークの Scroll が、10 月 19 日にエアドロップを開始することを確認
Oct 12, 2024 am 12:14 AM
この後退の一因は、恐怖と貪欲指数が45を下回ったままで、仮想通貨市場全体の調子が芳しくないことだ。ビットコインも6万5000ドルの抵抗点を超えることができていない。
スクロール (SCR) トークンの発売: 分散化への一歩
Oct 11, 2024 pm 10:18 PM
このトークンの発売は、スクロールがガバナンスを強化し、イーサリアムエコシステムにおける主要プレーヤーとしての役割を強化することを目指している中で行われた。
