1つの要素を別の要素のスクロールと一致させる

同じ高さの2つの高さと幅の狭い要素が隣り合っています。これらの2つの要素のいずれかをスクロールすると、もう一方の要素がスクロールされます。1つの要素を別の要素のスクロールと一致させる

jQueryを使用してこれを行うにはどうすればよいですか？私はScrollToプラグインを試しましたが、ドキュメントはとても悪いので、使用方法を理解できません。

2011-01-22 Jason Swett

これは、this example (link)に示すように、いくつかの単純なjQueryを使用して実行できます。

基本的に、あなただけのscroll()イベントハンドラに他を模倣するために、1つのdivの.scrollTop()を設定します。

$('#leader').scroll(function(e){ 
    $('#copycat').scrollTop($(this).scrollTop()); 
});

出典

2011-01-22 14:52:26 mVChr

右側の要素に水平スクロールバーがあり、左側の要素がそうでない場合、スクロール同期を行う方法がわかりますか？水平スクロールバーは、右側の要素のスクロール距離を短くします。 –

私はスクロールバーの高さを計算し、それによって左の要素の高さをそれほど減らしました。 –

thisチュートリアルを行くと、あなたが

出典

2011-01-22 13:36:06 svk

これは、あなたが探している答えではないが、それは言われる必要がある何をしたいのようなコードを変更してください：何をやっていることは悪いデザインで、それは持っているがこれまでに何度もやったことがありますし、素敵なユーザーインターフェイスの一部ではありませんでした。ブラウザにぶつかって解決策を作ることに多くのエネルギーを浪費するのではなく、よりうまく機能し、実装が簡単なデザインを思いついていきます。

あなたの場合：オブジェクトの2つのリストを一緒にスクロールするには、1つのスクロールバーの下にライブを作成します。

たとえば、2つの複数の選択ボックスの場合、スクロールバーが非アクティブ/非表示になるように両方のコンテンツが完全な高さになっていることを確認してから、小さい高さのdivにラップしてoverflow: scroll 。

一般的に、このようなことが起こらない場合は、それをやめるのが簡単で簡単な方法はありません。その理由を考えてください。それは悪い考えであることに気づくでしょう。

これは必ずしも当てはまるとは限りませんが、しばしばそうなります。

出典

2011-01-22 13:42:19

「それは素敵なユーザーインターフェースの一部ではありませんでした」。神様、私はそれを持っていない 'diff'のGUIを使うのは嫌です。 –

なぜですか？まず第一に、いくつかの差分ツールには明らかに理由があるため、複数のスクロールバーがありません。なぜなら、スクロールバーが独立して動作しないと、なぜ2つのスクロールバーがあるのですか？同時スクロール機能をオフにして、それらを再び独立させるスイッチがないかぎり、秒間のスクロールバーが何の理由もなくスペースを占有するように思えます。ほとんどの開発者にとって、良いユーザーインターフェイスは把握が難しいことが分かりました。なぜなら、エンジニアは心臓部だからですが、スクロールバーを持っていても、この点はまったく理由がないようです。 –

これは、右側の要素を水平にスクロールする必要があるが、左側の要素を水平に固定する必要があるため、垂直方向に互いに固執する必要があるためです。 2つの別々の要素を使わずにこれを達成する方法を考えることができれば、それについて聞いてみたいと思います。 –

1つの要素を別の要素のスクロールと一致させる

答えて

関連する問題