以下のサイトを参考に横スクロールするタブを作成したのですが
追加の機能として
クリックしたタブの個所に自動でスクロールしてそのタブが画面の中心になるように改修を入れたいですがうまくいきません。
例ですがカテゴリ7をタップすると少し左にスクロールするイメージです
具体的には
画面サイズの半分ータップしたタブのx座標がマイナスだった時、右にスライドしてプラスだった時その分左にスライドするのだと考えているのですが
うまくいきません
ロジックやサンプルなどありましたらご教示お願いいたします
http://www.yukihy.com/entry/scroll-menu
現状のコードは以下になります
<nav id="scroll-menu"> <ul class="scroll-menu-inner" id="scroll-menu"> <li id="category1" onClick="scrollFunction('category1')">カテゴリ1</li> <li id="category2" onClick="scrollFunction('category2')">カテゴリ2</li> <li id="category3" onClick="scrollFunction('category3')">カテゴリ3</li> <li id="category4" onClick="scrollFunction('category4')">カテゴリ4</li> <li id="category5" onClick="scrollFunction('category5')">カテゴリ5</li> <li id="category6" onClick="scrollFunction('category6')">カテゴリ6</li> <li id="category7" onClick="scrollFunction('category7')">カテゴリ7</li> <li id="category8" onClick="scrollFunction('category8')">カテゴリ8</li> <li id="category9" onClick="scrollFunction('category9')">カテゴリ9</li> <li id="category10" onClick="scrollFunction('category10')">カテゴリ10</li> <li id="category11" onClick="scrollFunction('category11')">カテゴリ11</li> <li id="category12" onClick="scrollFunction('category12')">カテゴリ12</li> <li id="category13" onClick="scrollFunction('category13')">カテゴリ13</li> <li id="category14" onClick="scrollFunction('category14')">カテゴリ14</li> <li id="category15" onClick="scrollFunction('category15')">カテゴリ15</li> <li id="category16" onClick="scrollFunction('category16')">カテゴリ16</li> <li id="category17" onClick="scrollFunction('category17')">カテゴリ17</li> </ul> </nav> <script> function scrollFunction(id){ const scrollMenu = document.getElementById('scroll-menu'); //タグの位置 const selectedTag = document.getElementById(id); // 画面サイズータグの位置でスライドさせていますがここのロジックがわからないです const tabWidth =window.parent.screen.width-selectedTag.getBoundingClientRect().left/2; scrollMenu.scrollLeft = (tabWidth); } </script> <style> #scroll-menu { height: 40px;/*メニューの縦幅*/ background-color: #444;/*メニューの背景色*/ overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } #scroll-menu .scroll-menu-inner { list-style-type: none; width: 3000px;/*メニューの横幅*/ height: 100%; margin: 0; padding: 0; text-align: center; } #scroll-menu li { float: left; height: 100%; color:white } #scroll-menu a:active { background-color: #555;/*クリック時の背景色*/ } </style>
回答1件
あなたの回答
tips
プレビュー