☰

scrollIntoView スクロールが長すぎる 質問する

tag-icon • tag-icon javascript dom scroll
scrollIntoView スクロールが長すぎる 質問する

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

ユーザーがページにアクセスすると、現在選択しているオプションがスクロール div の最上部に移動するはずです。この機能は動作しています。問題は、少しやりすぎていることです。たとえば、現在選択しているオプションが約 10 ピクセル高すぎます。そのため、ページにアクセスすると、URL を使用してどのオプションが選択されたかが識別され、そのオプションがスクロール div の最上部にスクロールされます。注: これはウィンドウのスクロール バーではなく、スクロール バー付きの div です。

選択したオプションを div の先頭に移動するには、次のコードを使用します。

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

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

el.scrollIntoView(true);

div の上部に移動しますが、約 10 ピクセル上すぎます。これを修正する方法を知っている人はいますか?

ベストアンサー1

適切な位置までスムーズにスクロール

ほとんどの場合、これがより良い答えです. scroll-marginおよびscroll-padding CSS ルールを使用します。以下のソリューションでは、getBoundingClientRect追加の強制レイアウトをトリガーする を使用します。

正しい y座標を取得して使用するwindow.scrollTo({top: y, behavior: 'smooth'})

const id = 'profilePhoto';
const yOffset = -10; 
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

window.scrollTo({top: y, behavior: 'smooth'});

おすすめ記事