0

1 つのスクロールバーのみを使用して 2 つのコンテナーを制御しようとしています。画面と右側に固定されている別のコンテナーを表示するために (CSS 変換を使用して) シフ​​トする大きなコンテナーがあります。ここで私の実験を見ることができます：

http://codepen.io/anon/pen/ipaCI

私が望むのは、外側のスクロールバー (大きな div と大きな div を制御する) のみを使用して両方をスクロールすることです。私は同期スクロールを探していません.スクロールバーが最初に小さなコンテナを右にスクロールし、最後に達したら大きなコンテナを左にスクロールしたい.

これらの両方を含む本文で、overflow-y: scroll を設定しようとして実験しましたが、右側のものを制御できないようです。直ったからでしょうか？絶対に配置すると、ページの一部のように続きますが、これは望ましい効果ではありません。

この種の状況をうまく実装した人はいますか?

4

1 に答える 1

0

これを行うためのプラグインを検索しましたが、見つかりませんでした。私はjqueryを使用して自分で解決策を考え出しました：

var $window = $(window),
  $panel = $('.right-panel'),
  windowPos = $window.scrollTop(),
  scrollPos = $window.scrollTop(),
  maxPos = $('.panel', $panel).height() - $window.height();

$window.on('scroll.panels-handler', function() {
  var scrollDelta = $window.scrollTop() - windowPos;
  windowPos = $window.scrollTop();
  scrollPos += scrollDelta;

  if (scrollPos < 0) {
    scrollPos = 0;
  } else if (scrollPos > maxPos) {
    scrollPos = maxPos;
  }
  $panel.scrollTop(scrollPos);
});

コンテナーの最小スクロール値と最大スクロール値を追加しました。基本的に - 常に最初にサイドバーをスクロールし、最後までスクロールしてから、メイン ウィンドウのみをスクロールします。

サイドバーのみをスクロールする方法がわかりませんでした (メインは常にスクロールします) - しかし、解決策には満足しています。

実際のデモについては、元の codepen を参照してください

http://codepen.io/anon/pen/ipaCI

于 2013-02-19T12:18:02.957 に答える