プルダウンで表示項目を切り替える仕様のものを作成したのですが、リストの途中までスクロールした時にプルダンで表示変更をした際、変更先の表示も途中からになってしまっています。
プルダウンで切り替えた場合には常にそのリストの一番上が表示されるようにしたいのですが、どのようにしたら良いでしょうか。

現在の状態は以下通りです

HTML
1<div class="sticky-item">
2  <div class="col-auto">
3    <select class="form-control" id="list" onchange="viewChange();">
4        <option value="select1">リスト1</option>
5        <option value="select2">リスト2</option>
6        <option value="select3">リスト3</option>
7    </select>
8</div>
9
10</div>
11<div class="col-auto">
12  <div id="item1">
13    <section class="item-list">
14      <ul>
15        <li>リスト1</li>
16        <li>リスト1</li>
17        <li>リスト1</li>
18        <li>リスト1</li>
19        <li>リスト1</li>
20        <li>リスト1</li>
21        <li>リスト1</li>
22        <li>リスト1</li>
23        <li>リスト1</li>
24        <li>リスト1</li>
25        <li>リスト1</li>
26        <li>リスト1</li>
27        <li>リスト1</li>
28        <li>リスト1</li>
29        <li>リスト1</li>
30        <li>リスト1</li>
31        <li>リスト1</li>
32        <li>リスト1</li>
33        <li>リスト1</li>
34        <li>リスト1</li>
35        <li>リスト1</li>
36        <li>リスト1</li>
37        <li>リスト1</li>
38        <li>リスト1</li>
39        <li>リスト1</li>
40        <li>リスト1</li>
41        <li>リスト1</li>
42        <li>リスト1</li>
43      </ul>
44
45    </section>
46
47  </div>
48  <div id="item2" style="display:none;">
49    <section class="item-list">
50      <ul>
51        <li>リスト2</li>
52        <li>リスト2</li>
53        <li>リスト2</li>
54        <li>リスト2</li>
55        <li>リスト2</li>
56        <li>リスト2</li>
57        <li>リスト2</li>
58        <li>リスト2</li>
59        <li>リスト2</li>
60        <li>リスト2</li>
61        <li>リスト2</li>
62        <li>リスト2</li>
63        <li>リスト2</li>
64        <li>リスト2</li>
65        <li>リスト2</li>
66        <li>リスト2</li>
67        <li>リスト2</li>
68        <li>リスト2</li>
69        <li>リスト2</li>
70        <li>リスト2</li>
71        <li>リスト2</li>
72        <li>リスト2</li>
73        <li>リスト2</li>
74        <li>リスト2</li>
75        <li>リスト2</li>
76        <li>リスト2</li>
77        <li>リスト2</li>
78        <li>リスト2</li>
79      </ul>
80    </section>
81
82  </div>
83  <div id="item3" style="display:none;">
84    <section class="item-list">
85      <ul>
86        <li>リスト3</li>
87        <li>リスト3</li>
88        <li>リスト3</li>
89        <li>リスト3</li>
90        <li>リスト3</li>
91        <li>リスト3</li>
92        <li>リスト3</li>
93        <li>リスト3</li>
94        <li>リスト3</li>
95        <li>リスト3</li>
96        <li>リスト3</li>
97        <li>リスト3</li>
98        <li>リスト3</li>
99        <li>リスト3</li>
100        <li>リスト3</li>
101        <li>リスト3</li>
102        <li>リスト3</li>
103        <li>リスト3</li>
104        <li>リスト3</li>
105        <li>リスト3</li>
106        <li>リスト3</li>
107        <li>リスト3</li>
108        <li>リスト3</li>
109        <li>リスト3</li>
110        <li>リスト3</li>
111        <li>リスト3</li>
112        <li>リスト3</li>
113        <li>リスト3</li>
114      </ul>
115    </section>
116  </div>
117</div>

CSS
1    .sticky-item{
2      position: sticky;
3      top: 85px;
4    }

JavaScript
1function viewChange(){
2  if(document.getElementById('list')){
3      id = document.getElementById('list').value;
4      if(id == 'select1'){
5          document.getElementById('item1').style.display = "";
6          document.getElementById('item2').style.display = "none";
7          document.getElementById('item3').style.display = "none";
8      }else if(id == 'select2'){
9          document.getElementById('item1').style.display = "none";
10          document.getElementById('item2').style.display = "";
11          document.getElementById('item3').style.display = "none";
12      }
13      else if(id == 'select3'){
14          document.getElementById('item1').style.display = "none";
15          document.getElementById('item2').style.display = "none";
16          document.getElementById('item3').style.display = "";
17      }
18  }
19
20window.onload = viewChange;
21}

コード上で改善した方が良い箇所ありましたらなんなりとご指摘ください。
どうぞよろしくお願いいたします。

yambejp

2022/02/01 02:55 編集

長いリストの途中までスクロールするとセレクトボックスは表示外になりますよね？どうやってセレクトボックスを変更するのでしょうか？

kizunami

2022/02/01 03:06

ご覧いただきありがとうございます！失礼いたしました。。 .sticky-item{ position: sticky; top: 85px; } としておりまして、セレクトボックスを固定表示しております。追記いたしましたのでご確認いただけますと幸いです。どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

一番手っ取り早いのは表示エリアにidを振ってハッシュでとばす

HTML
1<div class="col-auto" id="area">
2  <div id="item1" data-target="select1">
3・・・

としておいてonchageイベントでlocation.href="area"とする

ハッシュを使いたくない場合はareaのtop位置を調べてscrollToする

javascript
1    const top=window.scrollY+area.getBoundingClientRect().top;
2    window.scrollTo({top});

全体イメージ

javascript
1<style>
2.sticky-item{
3      position: sticky;
4      top: 85px;
5    }
6</style>
7<script>
8window.addEventListener('DOMContentLoaded', ()=>{
9  const area=document.querySelector('#area');
10  document.querySelector('#list').addEventListener('change',e=>{
11    document.querySelector('[data-target]:not([hidden])').setAttribute('hidden','');
12    document.querySelector(`[data-target="${e.target.value}"]`).removeAttribute('hidden');
13    const top=window.scrollY+area.getBoundingClientRect().top;
14    window.scrollTo({top});
15    //location.hash="area";
16  })
17});
18</script>
19
20<div class="sticky-item">
21  <div class="col-auto">
22    <select class="form-control" id="list">
23        <option value="select1">リスト1</option>
24        <option value="select2">リスト2</option>
25        <option value="select3">リスト3</option>
26    </select>
27  </div>
28</div>
29<br><br><br><br><br><br><br><br><br><br>
30<br><br><br><br><br><br><br><br><br><br>
31<br><br><br><br><br><br><br><br><br><br>
32<div class="col-auto" id="area">
33  <div id="item1" data-target="select1">
34    <section class="item-list">
35      <ul>
36        <li>リスト1</li>
37        <li>リスト1</li>
38        <li>リスト1</li>
39        <li>リスト1</li>
40        <li>リスト1</li>
41        <li>リスト1</li>
42        <li>リスト1</li>
43        <li>リスト1</li>
44        <li>リスト1</li>
45        <li>リスト1</li>
46        <li>リスト1</li>
47        <li>リスト1</li>
48        <li>リスト1</li>
49        <li>リスト1</li>
50        <li>リスト1</li>
51        <li>リスト1</li>
52        <li>リスト1</li>
53        <li>リスト1</li>
54        <li>リスト1</li>
55        <li>リスト1</li>
56        <li>リスト1</li>
57        <li>リスト1</li>
58        <li>リスト1</li>
59        <li>リスト1</li>
60        <li>リスト1</li>
61        <li>リスト1</li>
62        <li>リスト1</li>
63        <li>リスト1</li>
64        <li>リスト1</li>
65        <li>リスト1</li>
66        <li>リスト1</li>
67        <li>リスト1</li>
68        <li>リスト1</li>
69        <li>リスト1</li>
70        <li>リスト1</li>
71        <li>リスト1</li>
72        <li>リスト1</li>
73        <li>リスト1</li>
74        <li>リスト1</li>
75        <li>リスト1</li>
76        <li>リスト1</li>
77        <li>リスト1</li>
78        <li>リスト1</li>
79        <li>リスト1</li>
80        <li>リスト1</li>
81        <li>リスト1</li>
82        <li>リスト1</li>
83        <li>リスト1</li>
84      </ul>
85    </section>
86  </div>
87  <div id="item2" data-target="select2" hidden>
88    <section class="item-list">
89      <ul>
90        <li>リスト2</li>
91        <li>リスト2</li>
92        <li>リスト2</li>
93      </ul>
94    </section>
95
96  </div>
97  <div id="item3" data-target="select3" hidden>
98    <section class="item-list">
99      <ul>
100        <li>リスト3</li>
101        <li>リスト3</li>
102        <li>リスト3</li>
103      </ul>
104    </section>
105  </div>
106</div>
107<br><br><br><br><br><br><br><br><br><br>
108<br><br><br><br><br><br><br><br><br><br>
109<br><br><br><br><br><br><br><br><br><br>