ボタン付きのJavaScriptの水平スクロール

Question

私のプロフィールページでは、私は別のものをやって賞を表示する小さなdivを持っています。スペースを節約するためにdivは本当に小さいですが、私はボタンを使って水平スクロールを行っていました。私はstackoverflowで見つけることができますが、何も動作することができない多くの提案を見てきました。

<div class="award-wrapper fr" style="width:19%; margin:auto;"> 
    <h3 class="award-title"><i class="fa fa-trophy"></i> Awards</h3> 
    <div class="award-content" id="inner outer" style=" margin:0 auto; text-align:center;"> 
     <div style="float:left; height:100%; left:0; position:absolute;"> 
      <input type="button" value="«" class="scroll_button" id="left-button"/> 
     </div> 

     <div id="myDiv" style="float: left;"> 
      <?php include"award.php"; ?> 
     </div> 

     <div style="float:right; height:100%; right:0; position:absolute;"> 
      <input type="button" value="»" class="scroll_button" id="right-button"/> 
     </div> 
    </div> 
</div> 

.scroll_button { 
    opacity: 0.5; 
    color:#fff; 
    padding:3px; 
    height:100%; 
} 

.scroll_button:hover { 
    opacity: 0.8; 
    color:#05c7f7; 
} 

.scroll_button:active { 
    color:#05c7f7; 
    opacity: 0.8; 
    background:#08090a; 
} 

ない私のコードの他の部分が必要な場合は必ず

Answer 1

あなたが左にスクロールバー、および右のそれを強制的に似権利を強制的に左のボタンを有することを意味した場合、それは間違いなくそうもっともらしいです。ここで見つける

https://jsfiddle.net/5ug583ff/

var button = document.getElementById('slide'); 
button.onclick = function() { 
    document.getElementById('container').scrollLeft += 20; 
}; 

コード例：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

私は、私は完全にあなたの質問を理解していなかったとして、これはあなたの質問への答えである場合には100％を確認していません。

Answer 2

あなたは賞のdivの中に水平方向のスクロールを許可したい場合は...

がこれを置き換えます。これにより

<div id="myDiv" style="float: left;"> 
<?php include"award.php"; ?> 
</div> 

：

<div id="myDiv" style="float: left; overflow-x:scroll;"> 
    <?php include"award.php"; ?> 
</div>