I pulsanti di scorrimento per apparire in linea con Browser nativi Scrollbar

Question

Ho una tabella che consuma la larghezza del 40% della mia pagina.Quando il contenuto è superiore al 40%, l'area è scorrevole e viene visualizzata la barra di scorrimento nativa dei browser.

Ho aggiunto un paio di pulsanti, che consente all'utente di fare clic su Avanti e Indietro, tuttavia, la mia domanda è, come posso ottenere i pulsanti per apparire su entrambi i lati della barra di scorrimento dei browser?

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

.

Ecco il mio violino: http://jsfiddle.net/oampz/2usst/2/

Answer 1

È possibile utilizzare la proprietà position:absolute CSS per ottenere ciò di cui hai bisogno.Basta aggiungere questi seguenti CSS nel tuo foglio di stile.

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

.

Ecco il tuo violino aggiornato http://jsfiddle.net/2usst/6/

.

E un'altra cosa, mentre il tuo JavaScript funziona, ha un bug.Prova a fare clic sul pulsante Inoltra più volte e quindi fare clic sul pulsante indietro.Capirai.È necessario ripristinare il valore movePixels quando raggiungono la fine.

Fammi sapere se questo risolve il tuo problema.: -)