要素内のみスクロールさせたい

ページ内の特定の要素のみをスクロールさせたいです。
画像のようなページがあり、左下の要素にはリストが入っています。
この最も下の要素にスクロールさせたいのですが、その際にユーザーの視点はスクロールせずに、
左下のボックスだけをスクロールさせたいです。

ユーザーが自身で、左下のボックスが見える位置までスクロールすると、最後の要素が表示されているという状態を作りたいです。

"リストの最後の要素".scrollIntoview()

でトライしてみましたが、ユーザーの視点までもスクロールされてしまいます。

どのようにしたらよいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

左側の要素の中身が仮に300pxだとして、以下のようにするとスクロールするようにすることはできます。

CSS
1.左下のボックス {
2  padding: 10px;
3  height: 280px; /* 中身のサイズより小さい値を指定  */
4  box-sizing: border-box;
5  overflow-y: auto; /* 必要なときだけ縦方向のスクロールバーを表示 */
6}

追記しました。

HTML
1<div class="parent">
2  <div class="box"></div>
3  <div class="box"></div>
4  <div class="box"></div>
5  <div class="box" id="last"></div>
6</div>

JS
1var element = document.getElementById("last");
2element.scrollIntoView(false);
3window.scrollTo(0, 0); /* 画面全体のスクロール位置を最上部に */

まずは上記のように末尾の要素にidを振り、getElementByIdで要素を取得し動くかどうかを確認してください。

参考URL:
https://qiita.com/amamamaou/items/728d571d508347b2bc82

投稿2020/04/06 10:37

編集2020/04/06 11:22

new1ro

総合スコア4528

indi

2020/04/06 10:44

左下のボックスはすでにスクロールができる前提です。ページ表示のタイミングでは、左下のボックスは下の方にあり隠れてます。そのボックスの中身をスクロールして一番したのリストアイテムを表示しておきたいです。ユーザーがスクロールして左下のボックスが見えるようになったときに、リストアイテムの一番下が見えている状態を作りたいです。

new1ro

2020/04/06 11:06 編集

回答に追記しました。「リストの最後の要素」の取得の仕方で失敗しているのでは..を思います。 1. まずは「リストの最後の要素」にidを振り、動くかを確認これで問題なければ終了。回答に追記したのはここまでです。 ↓もし、「リストの最後の要素」にidを振りたくない場合 2. querySelectorAll()などで「リストの最後の要素」を取得する方法で失敗しているので、 scrollIntoView()とは切り離して確認。という手順で確認すればOKと思います。

indi

2020/04/06 11:15

回答ありがとうございます。頂いたコードでの動作は確認できました。ただ、質問文にも書いたようにユーザーの視点もスクロールされてしまいます。ユーザーの視点(ページ右にあるスクロールバー)は一切スクロールせず、左下のボックスのみスクロールさせた状態にしておきたいのです。

indi

2020/04/06 11:19 編集

ページ表示時・左下のボックス　　・下の方にあり見えない　　・一番下までスクロールさせる・ページ全体　　・スクロールしない。別の言い方をすると一番上までスクロールされた状態自分で下までスクロールすると左下のボックスが見える。見えたボックスはすでに全スクロールされているという状態です。

new1ro

2020/04/06 11:22

追記しました。 JavaScript側で、scrollIntoView()のあとに以下を加えるといかがでしょうか? window.scrollTo(0, 0);

indi

2020/04/06 11:30

ありがとうございます、一旦下にスクロールして戻るというのが少し気になりましたがこの方法でやっていきたいと思います!