ホームページ ウェブフロントエンド jsチュートリアル スクロールバーのスクロールに合わせてDIVもスクロールする実装コード【推奨】_jquery

スクロールバーのスクロールに合わせてDIVもスクロールする実装コード【推奨】_jquery

May 16, 2016 pm 03:05 PM
div スクロール スクロール・バー

この種のコードを書くのは以前は面倒だったのを覚えていますが、JQuery を使用すると数行のコードだけで簡単になります。

<script type="text/javascript" src="Js/jquery-1.7.2.min.js"></script> 
  <script type="text/javascript"> 
    $(function() { 
      $(window).scroll(function() { 
        var top = $(window).scrollTop()+200; 
        var left= $(window).scrollLeft()+320; 
        $("#editInfo").css({ left:left + "px", top: top + "px" }); 
      }); 
    }); 
  </script> 
 
  <div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;"> 
    <div>用户名:<input type="text" /></div> 
    <div>密码:<input type="text" /></div> 
    <div>年龄:<input type="text" /></div> 
    <div>备注:<input type="text" /></div> 
    <div><input type="button" value="保存" /></div> 
  </div> 
ログイン後にコピー

スクロール バーのスクロールに合わせて DIV をスクロールするための上記の実装コード [推奨] は、エディターによって共有されるすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Microsoft、Windows 11のFluentスクロールバーをGoogle Chromeに導入 Microsoft、Windows 11のFluentスクロールバーをGoogle Chromeに導入 Apr 14, 2023 am 10:52 AM

Windows 10 とは異なり、Windows 11 には、ユーザーが操作すると形状が変化する新しい最新の「流体スクロールバー」が搭載されています。 Fluent スクロールバーは本質的に動的であり、さまざまなフォーム ファクターで、またはウィンドウ サイズを変更すると自動的に拡大縮小され、現在、設定、メディア プレーヤーなどのアプリで使用されています。 Microsoftの新たな提案によると、Google Chromeにはまもなくスムーズなスクロールバー機能が搭載される可能性があるという。 Microsoftは提案の中で、Chromeの古いスクロールバーを最新化したいと述べている

JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? Oct 22, 2023 am 08:12 AM

JavaScriptで指定した要素位置までスクロールする機能を実装するにはどうすればよいですか? Web ページにおいて、ユーザーの視線を特定の要素の位置に集中させる必要がある場合、JavaScript を使用して、指定された要素の位置までスクロールする機能を実装できます。この記事では、JavaScript を使用してこの関数を実装する方法と、対応するコード例を紹介します。まず、対象要素の位置情報を取得する必要があります。 Element.getBoundingClientを使用できます

Reactでスクロールバーのスクロールを非表示にする方法 Reactでスクロールバーのスクロールを非表示にする方法 Dec 21, 2022 pm 03:38 PM

React でスクロール バーのスクロールを非表示にする方法: 1. 対応する「react-native」ファイルを開きます; 2. 水平方向のスクロールを設定します; 3. 「showshorizo​​ntalScrollIndicator」の値を「false」に設定して、水平スクロール バーを非表示にします。

iframe のスクロール動作を監視する iframe のスクロール動作を監視する Feb 18, 2024 pm 08:40 PM

iframe のスクロールを監視する方法には、特定のコード サンプルが必要です。iframe タグを使用して Web ページに他の Web ページを埋め込む場合、場合によっては、iframe 内のコンテンツに対して特定の操作を実行する必要があります。一般的なニーズの 1 つは、スクロールが発生したときに対応するコードを実行できるように、iframe のスクロール イベントをリッスンすることです。以下では、JavaScript を使用して iframe のスクロールを監視する方法を紹介し、参考として具体的なコード例を示します。 iframe 要素を取得する まず、必要なものがあります。

HTML、CSS、jQuery: 自動スクロール掲示板を作成する HTML、CSS、jQuery: 自動スクロール掲示板を作成する Oct 27, 2023 pm 06:31 PM

HTML、CSS、および jQuery: 自動的にスクロールする掲示板を作成する 最新の Web デザインでは、重要な情報を伝え、ユーザーの注意を引くために掲示板がよく使用されます。自動スクロール掲示板は、Web ページ上で広く使用されており、掲示板のコンテンツがページ上でスクロールしてアニメーション形式で表示され、情報の表示効果とユーザー エクスペリエンスが向上します。この記事ではHTML、CSS、jQueryを使って自動スクロール掲示板を作る方法と具体的なコード例を紹介します。まず、HTが必要です

Mac システムでスクロール バーを常に表示するように設定する方法 - スクロール バーを常に表示するように設定する方法 Mac システムでスクロール バーを常に表示するように設定する方法 - スクロール バーを常に表示するように設定する方法 Mar 18, 2024 pm 06:22 PM

最近、Mac システムのスクロール バーを常に表示するように設定する方法について、友人が編集者に相談しました。ここでは、Mac システムのスクロール バーを常に表示するように設定する方法を紹介します。必要な友人は、詳細を学ぶことができます。 。ステップ 1: システムのスタート メニューで、[システム環境設定] オプションを選択します。ステップ 3: システム環境設定ページで、[全般] オプションを選択します。手順 3: 一般ページで [常に] を選択すると、スクロール バーが表示されます。

CSSを使用してdivの角が欠けていることを認識する方法 CSSを使用してdivの角が欠けていることを認識する方法 Jan 30, 2023 am 09:23 AM

div の角が欠けていることを認識するための CSS メソッド: 1. HTML サンプル ファイルを作成し、div を定義します; 2. div の幅と高さの背景色を設定します; 3. 削除する必要がある div に疑似クラスを追加します隅に配置し、擬似クラスを背景色と同じ色を使用するように設定し、45 度回転して、削除する必要がある隅に配置します。

Vueで全画面スクロール効果を実装する方法 Vueで全画面スクロール効果を実装する方法 Nov 08, 2023 am 08:42 AM

Vue で全画面スクロール効果を実現する方法 Web デザインでは、全画面スクロール効果はユーザーに非常にユニークでスムーズなブラウジング エクスペリエンスをもたらします。この記事では、Vue.js で全画面スクロール効果を実現する方法と具体的なコード例を紹介します。全画面スクロール効果を実現するには、まず Vue.js フレームワークを使用してプロジェクトを構築する必要があります。 Vue.js では、vue-cli を使用してプロジェクトのスケルトンをすばやく構築できます。次に、フルページなどのスクロール効果を実現するために、いくつかのサードパーティ ライブラリを導入する必要があります。

See all articles