tableでスクロールバーが表示されるときに、ボタンをクリックすると左右に移動するようにしたいです。

tableでスクロールバーが表示されるときに、ボタンをクリックすると左右に移動するようにしたいです。
サンプル用のは左右ボタンで左右移動できるようになったのですが、tableにあてはめたらうまく動きません。
レクチャーいただければ幸いです。

・codepenサンプル
https://codepen.io/boo-jp/pen/zYdpEKJ

                <button type="button" class="buttonleft c-scroll-button border-radius"><i class="ph-caret-left">左</button>
                <button type="button" class="buttonright c-scroll-button border-radius"><i class="ph-caret-left">右</button>
                  
<div class="l-table">
    <div class="js-scrollable p-scrollbar">
        <table class="p-table-search-theme">
            <thead class="has-background-thead">
                <tr class="thead">
                    <th class="sorting th-first" rowspan="2">登録<br>番号</th>
                    <th class="sorting th-second" rowspan="2">登録<br>番号</th>
                    <th class="sorting th-third" rowspan="2">技術名称</th>
                    <th class="th-fourth" rowspan="2">技術名称</th>
                    <th class="th-fifth" colspan="2">技術名称 </th>
                    <th class="sorting th-seventh" rowspan="2">技術名称</th>
                    <th class="sorting th-eighth" rowspan="2">技術名称</th>
                    <th class="th-ninth" rowspan="2">カタログ・パンフレット</th>
                </tr>
                <tr>
                    <th class="sorting-sc">農業農村<br>設備事業</th>
                    <th class="sorting-sc">その他<br>事業</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 0 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 1 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 2 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 3 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 4 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 5 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.0.0/css/scroll-hint.css">
<style>

const buttonright = document.querySelector('.buttonright');
const buttonleft = document.querySelector('.buttonleft');
const container = document.querySelector('.l-table');

buttonright.onclick = function () {
  container.scrollLeft = container.scrollWidth;
};

buttonleft.onclick = function () {
  container.scrollLeft = 0;
};

・codepen
https://codepen.io/boo-jp/pen/ZEJvPEV

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

回答1件

ベストアンサー

https://codepen.io/boo-jp/pen/ZEJvPEV
まず、このサンプルですが、スクリプトが動作してません。
最初、原因がわからず戸惑いましたが、HTMLの最後に、<style>があるのが原因でした。
それ以降のコードがスタイルと判断されて、JSのコードが生成されたHTMLの最後にあるのでスクリプトと認識されていない状態だと思われます。
<style>を削除するとスクリプトは動作するようになりました。

ただ、スクリプトは動作しますが、ボタンクリックしてもスクロールはしません。

const container = document.querySelector('.l-table');をスクロールさせようとしてますが、これにはスクロールバーがありません。
スクロールバーを持っているのは.p-scrollbarですので、これをスクロールさせる必要があります。

js
1const buttonright = document.querySelector('.buttonright');
2const buttonleft = document.querySelector('.buttonleft');
3const container = document.querySelector('.p-scrollbar');
4
5buttonright.onclick = function () {
6  container.scrollLeft = container.scrollWidth;
7};
8
9buttonleft.onclick = function () {
10  container.scrollLeft = 0;
11};

投稿2021/11/04 05:10

hatena19

総合スコア34075

KKsall

2021/11/04 06:56 編集

ありがとうございます！すみません。styleを閉じてなかったからですね。他にも色々詳しくありがとうございます。ついでにご質問して恐縮ですが、仕様変更がありまして、ボタン一つで右・左に移動したいのですが if文の条件式をどうかけばいいのかがわからず。お手すきの時にでもよろしくお願いします。 <button type="button" class="c-scroll-button border-radius"><i class="ph-caret-left"></i><i class="ph-caret-left"></i></button> const buttonscroll = document.querySelector('.c-scroll-button'); const container = document.querySelector('.p-scrollbar'); buttonscroll.addEventListener('click', movement); function movement() { if () { container.scrollLeft = container.scrollWidth; } else { container.scrollLeft = 0; } }

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