Javascript水平滚动按钮

javascript horizontal scroll with buttons

本文关键字：按钮 滚动 水平 Javascript      更新时间：2023-09-26

在我的个人资料页面，我有一个小div，我做不同的事情显示奖励。为了节省空间，div真的很小，但是我已经用按钮做了一个水平滚动。

<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;
}

不确定我的代码是否有其他部分是必要的

如果你的意思是有一个左键来强制滚动条向左，和一个类似的右键来强制它向右，这绝对是如此合理。

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%确定这是否是你问题的答案，因为我没有完全理解你的问题。

如果你想让你的奖项水平滚动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>
相关文章：