Q&A
そのifで何を判定したいのかがわかっていれば明白に思いますが、如何でしょうか。
「左右に動く」とは具体的に何が左右に動くのでしょうか。
判定したいのはクリックイベントで、左右の動くのはスクールバーをもってるtableとなります
<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> <button type="button" class="c-scroll-button border-radius"><i class="ph-caret-left"></i><i class="ph-caret-left"></i></button> </div> </div> <style> <link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.0.0/css/scroll-hint.css"> </style>
<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; } }
・codepen
https://codepen.io/boo-jp/pen/ZEJvPEV
サンプル
https://codepen.io/boo-jp/pen/eYEVmaE
判定したいのはクリックイベントで、左右の動くのはスクールバーをもってるtableですね
質問本文にきちんと記載してください。
コードしか書かれてないのでほぼ伝わりません。
HTMLにはボタンは1つしかありませんが、1つのボタンでどう左右に動かしたいのでしょう?
なるほど。それを質問本文に書いてくださいね。やりたいことがぜんぜん伝わらなかったので。
回答1件
0
ベストアンサー
container.scrollLeft が0か否かをチェックすればよさそうです。
投稿2021/11/04 13:50
総合スコア21695
function movement() {
if (container !== 0 ) {
container.scrollLeft = container.scrollWidth;
} else {
container.scrollLeft = 0;
}
}
0でない場合は移動しましたが、戻ることができないのは条件がわるいのでしょうか？
わるいですね。回答を読んでください。
なるほど。。私のスキルレベルではこれ以上できそうにないので、こちらでベストアンサーにしてしまいますね。色々とありがとうございました。
問題が解決してないならベストアンサーを付けるべきではないですよ。
回答に「container.scrollLeftをチェック」と書いてあるのにコードでは container をチェックしているだけなのですけども。
すみません。できました。。。if (container.scrollLeft == 0)ですね。なんか勘違いしてて申し訳ないです。無事解決です！
あなたの回答
tips
プレビュー
