Q&A
タイトル
javascritp → JavaScript
実現したいこと
クリック時指定した場所までスクロール出来ない
コンソールでエラーは発生しませんが実際スクロールする事が出来ません
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>hidden検証</title> 6 <link rel="stylesheet" href="css/common.css"> 7</head> 8<body> 9 <div class="navi"> 10 <div class="page_wrap"> 11 <div class="page">01</div> 12 <div class="page">02</div> 13 <div class="page">03</div> 14 </div> 15 <!-- .page_wrap --> 16 <button class="prev">前へ</button> 17 <button class="next">次へ</button> 18 </div> 19 <!-- .navi --> 20 <script src="js/main.js"></script> 21</body> 22</html>
css
1.navi { 2 width: 200px; 3 margin: 20px auto; 4 overflow: hidden; 5} 6.page_wrap { 7 width: 600px; 8 background: #eee; 9 overflow: hidden; /*float:の意図しないレイアウト崩れ防止 */ 10 margin-bottom: 5px; 11} 12 13.page { 14 width: 200px; 15 height: 100px; 16 background: #ddd; 17 text-align: center; 18 float: left; /* 要素を横並び */ 19}
javascript
1const page = document.querySelectorAll('.page'); 2 3 4const prev = document.querySelector('.prev'); 5const next = document.querySelector('.next'); 6 7const page_wrap = document.querySelector('.page_wrap'); 8 9next.addEventListener('click', () =>{ 10 page_wrap.scrollLeft += 200; 11}); 12
試したこと
forEachを組み合わせる
javascript
1next.addEventListener('click', (elm) =>{ 2 page.forEach((elm) => { 3 elm.scrollLeft += 200; 4 }); 5});
補足情報（FW/ツールのバージョンなど）
Win10
VS Code バージョン: 1.54.2
Google Chrome
回答2件
0
ベストアンサー
こうではないですか？（ボタンも一緒に動いてしまいますが）
js
1//const page_wrap = document.querySelector('.page_wrap'); 2const page_wrap = document.querySelector('.navi');
投稿2021/04/09 00:51
総合スコア36960
ご返答ありがとうございます。
実はボタンはそのままにして div.page のみ移動する動きを作りたかったので。
でも教えて頂いた件、気付いていませんでした。
ありがとうございます。
ご解決されて何よりです。
はい。
例文で示した事をヒントにHTML側含めて修正し思った通りの動きになりました。
ありがとうございます。
0
.page_wrapにoverflow: hidden;を設定してるから、
スクロールできないというオチだったりしませんか？
hiddenだと隠すことになってしまい、スクロールバー自体が出てこないです。
投稿2021/04/09 00:48
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
