Scroll Buttons To Appear In Line With Native Browsers Scrollbar

Question

I have a table that consumes 40% width of my page. When the content is greater than 40%, the area is scrollable and the browsers native scrollbar appears.

I have added a couple of buttons, that allows the user to click on next and prev, however, my question is, how can i get the buttons to appear on either side of the browsers scrollbar?

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

Here's my fiddle: http://jsfiddle.net/oampz/2USsT/2/

Answer 1

You can use position:absolute css property to achieve what you need. Just add these following css in your stylesheet.

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

Here is your updated fiddle http://jsfiddle.net/2USsT/6/

And another thing, while your javascript is working, it has a bug. Try clicking forward button several times and then click backward button. You will understand. You need to reset movePixels value when they reach the end.

Let me know if this solves your problem. :-)