Question

在mu个人资料页面上，我有一个小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;
}

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

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 id="myDiv" style="float: left;">
<?php include"award.php"; ?>
</div>

有了这个：

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

javascript水平滚动按钮

2 个答案: