ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryはscrollbarをdivに追加します
次のjQueryコードスニペットを使用して、Divコンテンツがコンテナ要素領域を超えたときにスクロールバーを追加できます。 (デモンストレーションはありません。firebugに直接コピーしてください)
<code class="language-javascript">//D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#content').height(), scrollheight = $('#content')[0].scrollHeight, scrolltrigger = 0.9; console.log('wintop ' + wintop); console.log('docheight ' + docheight); console.log('winheight ' + winheight); console.log('divheight ' + divheight); console.log('scrollheight ' + scrollheight); console.log((wintop + divheight)/scrollheight); if (((wintop + divheight)/scrollheight) > scrolltrigger) { // 显示滚动条 }</code>
その他の測定値:https://www.php.cn/link/45d0bb417c9fab94dae50e5974f30ec7 https://www.php.cn/link/09ff53617a5f5038273550f773550f61f773550 🎜> jQuery Scrollbar FAQ(FAQS)
またはoverflow
に設定できます。 auto
コンテンツがDIVよりも大きい場合にのみ、Scrollbarsを追加しますが、scroll
は常にScrollbarsを表示します。簡単な例を次に示します:auto
scroll
この例では、「div」をdivのIDに置き換えます。これにより、コンテンツがDIVよりも大きい場合、SCROLLBARがDIVに追加されます。
<code class="language-javascript">$("#divID").css("overflow", "auto");</code>jqueryを使用して特定のdivにスクロールする方法は?
jQueryを使用して特定のdivにスクロールすると、
animate
この例では、「div」をdivのIDに置き換えます。これにより、2秒でDIVにスムーズにスクロールします。 scrollTop
<code class="language-javascript">$('html, body').animate({ scrollTop: $("#divID").offset().top }, 2000);</code>
jqueryを使用して、scrollbarsをdivに動的に追加すると、
関数を使用して
この例では、「div」をdivのIDに置き換えます。これにより、コンテンツがDIVよりも大きい場合、SCROLLBARがDIVに追加されます。 css
overflow
jqueryを使用してスクロールしてスムーズなアニメーションでdivを使用するにはどうすればよいですか?
<code class="language-javascript">$("#divID").css("overflow", "auto");</code>jqueryを使用して、スムーズなアニメーションでdivにスクロールするには、
関数と
属性を使用できます。例は次のとおりです。
animate
jQueryを使用して水平スクロールバーをDivに追加する方法は? scrollTop
<code class="language-javascript">$('html, body').animate({ scrollTop: $("#divID").offset().top }, 2000);</code>関数を使用して
プロパティを
に変更できます。例は次のとおりです。
css
jqueryを使用してdivの巻物を隠す方法は? overflow-x
scroll
jqueryを使用して、divの巻物を非表示にすると、
<code class="language-javascript">$("#divID").css("overflow-x", "scroll");</code>プロパティを
に変更できます。例は次のとおりです。
jqueryを使用して、divにスクロールバーがあるかどうかを確認すると、divのscrollHeight
またはscrollWidth
をそのclientHeight
またはclientWidth
と比較できます。 scrollHeight
またはscrollWidth
が大きい場合、divにはスクロールバーがあります。例は次のとおりです。
<code class="language-javascript">//D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#content').height(), scrollheight = $('#content')[0].scrollHeight, scrolltrigger = 0.9; console.log('wintop ' + wintop); console.log('docheight ' + docheight); console.log('winheight ' + winheight); console.log('divheight ' + divheight); console.log('scrollheight ' + scrollheight); console.log((wintop + divheight)/scrollheight); if (((wintop + divheight)/scrollheight) > scrolltrigger) { // 显示滚动条 }</code>この例では、「divid」をdivのIDに置き換えます。これにより、divに垂直スクロールバーがあるかどうかが確認されます。
jqueryを使用して、divの巻物を常に見えるようにするにはどうすればよいですか?
関数を使用してcss
プロパティをoverflow
に変更できます。例は次のとおりです。scroll
<code class="language-javascript">$("#divID").css("overflow", "auto");</code>
jQueryを使用してdivスクロールバーの色を変更する方法は?
この例では、「divid」をdivのIDに置き換えます。これにより、Chrome、Edge、およびSafariのDivのScrollbar色が変更されます。
<code class="language-javascript">$('html, body').animate({ scrollTop: $("#divID").offset().top }, 2000);</code>jqueryを使用してdivの底にスクロールする方法は?
jQueryを使用してdivの下部にスクロールすると、
scrollTop
この例では、「div」をdivのIDに置き換えます。これにより、divの下部までスクロールします。 scrollHeight
以上がjQueryはscrollbarをdivに追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。