JSスクリプトで要素内の子要素をスクロール
JavaScriptで特定の要素をスクリプトでスクロールさせたい場合は、絶対座標ならscrollTo,相対座標ならscrollBy、スクロールした量を取得するならscrollTopを使えば実現できます。
ただ移動させたいものが所属するスクロールがページ全体ではなく、ページ内に用意された子スクロール要素だった場合はどのようにすればよいか悩んだのでここに覚書をしておきます。
getBoundingClientRect
内側に作成した子スクロール要素で、scrollByメソッドを呼べば子要素の中でスクロールが起きるのでそれを利用します。
たとえばその中にY軸の先頭に持っていきたい孫要素があったとしたら、子要素と孫要素との距離をscrollByメソッドのYの値に渡します。
距離は子要素のY軸座用から、孫要素のY軸座標を引いた値になります。結果として子スクロール要素をその分スクロール移動させるという指示になります。
距離の算出方法はSYNCERさんのサイトを参考に、getBoundingClientRectを使うことにしました。
Element.getBoundingClientRectメソッドは、要素のサイズと位置を取得するものです。
document.getElementById('子スクロール要素のID').scrollBy(0,
document.getElementById('先頭に持っていきたい孫要素のID').getBoundingClientRect().y -
document.getElementById('子スクロール要素のID').getBoundingClientRect().y
);
サンプル
実際の稼働サンプルは次のようになります。「移動」ボタンを押すと下段のスクロール要素において19が先頭に来るようになっています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
サンプルのソース
サンプルのソースコードは次のようになっています。
<style>
.scroll {
width: 100px;
height: 100px;
overflow: scroll;
}
</style>
<div class="scroll">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
<div class="scroll" id="parent" >
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p id="target">19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
</div>
<button onclick="move()">移動</button>
<script>
function move(){
document.getElementById('parent').scrollBy(0,document.getElementById('target').getBoundingClientRect().y-document.getElementById('parent').getBoundingClientRect().y);
}
</script>scrollByの引数を(x,y)でなく、({ left: x, top: y, behavior: "smooth" }) という風にオブジェクトを渡すと、スクロールがアニメーションします。