1. ホーム
  2. javascript

[解決済み] scrollIntoView スクロールが遠すぎる

2022-02-24 07:27:24

質問

divを含むテーブル行を含むスクロールバーが、データベースから動的に生成されるページがあります。各テーブル行は、YouTube のプレイリストのビデオ プレーヤーの横に表示されるようなリンクのように動作します。

ユーザーがページにアクセスすると、そのユーザーがいるオプションがスクロールする div の最上部に移動することになっています。この機能は動作しています。問題は、それがほんの少し行き過ぎることです。例えば、ユーザーが選択したオプションは10pxほど高すぎるのです。そこで、ページを訪問し、url を使用してどのオプションが選択されたかを識別し、そのオプションをスクロール div の最上部にスクロールさせます。注意: これはウィンドウのスクロールバーではなく、スクロールバー付きの div です。

このコードを使って、選択されたオプションをdivの一番上に移動させるようにしています。

var pathArray = window.location.pathname.split( '/' );

var el = document.getElementById(pathArray[5]);

el.scrollIntoView(true);

divの上部に移動しますが、10ピクセルほど上に移動しすぎています。 どなたか修正する方法をご存じですか?

解決方法は?

10px程度であれば、単純に手動でcontainingを調整すれば良いかと思います。 div のスクロールオフセットは、このようになります。

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;