Question

我的桌子占用了我页面宽度的40％。当内容大于40％时，该区域可滚动，并显示浏览器本机滚动条。

我添加了几个按钮，允许用户点击next和prev，但是，我的问题是，如何让按钮出现在浏览器滚动条的两侧？

HTML：

<div class="scrollarea margin-bottom section" id="scrollMe">
<table class="my-table">
    <thead>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Official</th>
            <td>55</td>
            <td>54</td>
            <td>70.2</td>
            <td>120</td>
            <td>3.21</td>
            <td>65.2</td>
            <td>354</td>
            <td>2.01</td>
            <td>12.2</td>
            <td>84.2</td>
            <td>24.6</td>
            <td>41</td>
        </tr>
        <tr>
            <th>Rumoured</th>
            <td>56</td>
            <td>51</td>
            <td>68.1</td>
            <td>110</td>
            <td>4.1</td>
            <td>70.0</td>
            <td>280</td>
            <td>3.5</td>
            <td>4.2</td>
            <td>94</td>
            <td>10</td>
            <td>42</td>
        </tr>
    </tbody>
</table>
</div>
<div class="scroller-btns">
    <div class="left">
        <img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-left.jpg" width="20px"></img>
    </div>
    <div class="right">
        <img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-right.jpg" width="20px"></img>
    </div>
</div>
<div class="section">Additional details available soon....</div>

JS：

var $leftClick = $('.scroller-btns .left');
var $rightClick = $('.scroller-btns .right');
var movePixels = 0;

$leftClick.on('click', function (e) {
    $('#scrollMe').scrollLeft(movePixels - 80);
    movePixels = movePixels - 100;
});

$rightClick.on('click', function (e) {
    $('#scrollMe').scrollLeft(movePixels + 80);
    movePixels = movePixels + 100;
});

CSS：

.scrollarea {
    overflow: auto;
    width: 40%;
}
.section {
    padding-top: 10px;
    border-top: 1px solid black;
}
.margin-bottom {
    margin-bottom: 32px;
}
.my-table {
    padding: 15px;
}
.td {
    padding: 15px;
}

这是我的小提琴：http://jsfiddle.net/oampz/2USsT/2/

Answer 1

您可以使用position:absolute css属性来实现您的需求。只需在样式表中添加以下css即可。

<强> CSS

.scroller-btns{position:relative; width:40%;}
.scroller-btns .left{position: absolute; top: -50px; left: 0px;}
.scroller-btns .right{position: absolute; top: -50px; right: 0px;}

这是您更新的小提琴http://jsfiddle.net/2USsT/6/

另一件事，当你的javascript工作时，它有一个错误。尝试多次单击前进按钮，然后单击后退按钮。你会明白的。您需要在结束时重置movePixels值。

如果这可以解决您的问题，请告诉我。： - ）

滚动按钮与本机浏览器滚动条一致

1 个答案: