使って、ボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを表示する」の2つの機能を合せてカスタマイズする。animate関数を使ってつぎの2つの機能を合せてカスタマイズします。使用して、アップ、ダウンボタンのマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウン(自動スクロール)する。使って、ボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを全表示する。すると、DIVブロックのテキストが、つぎの3とおりの方法でスクロールできます。本来のスクロールバーの操作でスクロール(ブラウザ標準機能)アップ、ダウンボタンのマウスオーバーで自動スクロール(jQuery)キーボードの↑↓矢印キーの押下でスクロール(ブラウザ標準機能)デモ:jQueryでanimate関数を使って、アップ、ダウンボタンのマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンするなど。ここのデモでは、4つの動作機能を確認することができます。本来のスクロールバーの操作でスクロール(ブラウザ標準機能)キーボードの↑↓矢印キーの押下でスクロール(ブラウザ標準機能。DIVブロック上をクリックしてから使用。*****※キーボードの↑↓矢印キーの押下でスクロール操作の方法DIVブロック内をクリックしてから矢印キーを操作してください。Y!図:DIVブロックの構成HTML/JAVASCRIPT/CSSなどソースコードおよびjQueryファイルJAVASCRIPT/jQuery本ページは、以下の2つの機能についてカスタマイズしています。2つの機能の詳細なカスタマイズ方法については、それぞれのリンク先を参照してください。animate(scrollTop)関数を使います((1)のソースコード)。animateTime)です。animateTimeは、定数300msを設定しています。settimeoutSpeed)ごとにループさせて、アップ、ダウンボタンのマウスアウトで終了でします。scrollcounter)に設定します。することによって、「スクロールバーの操作」から「アップ、ダウンボタンのマウスオーバーで自動スクロール」へ移っても、前の操作で止まった位置からスクロールがスムースに連続して行えます。開く閉じるボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを全表示するは、animate(height)関数を使います((2)のソースコード)。);heightプロパティのDIVブロックの高さpxの値を設定することにより、DIVブロックの表示する高さを変えることができます。overflowの隠れているテキストを全表示するときは、テキストの全体の高さ(scrollHeight)を指定し、元に戻すときは、CSS定義の高さ(height)指定します。*/</style>HTML4つのアイコン画像を使用しています。src="black_down.gif"></div>まとめソースコードをまとめました。このソースコードのデモを別ウィンドウで見る。src="black_down.gif"></div></body></html>最終更新日;2016.10.6。