水平滾動懸停/點擊

Question

首先感謝您的任何幫助。

案例： 我在一行中有多個div。這些div位於一個框中，我可以在此框中水平滾動以查看其他div。 我做了兩個按鈕（左爲左，右爲右）在懸停或單擊這些按鈕時水平滾動。

問題： 我已經嘗試了一些CSS和JavaScript，但我似乎無法得到這個權利。

當鼠標懸停/點擊按鈕（或箭頭）時，是否有人知道如何實現水平滾動？

我做了一個小提琴：https://jsfiddle.net/wsemLhtz/

將是真棒得到這個用CSS只或簡單的JavaScript的工作，因爲我必須落實到一個Joomla系統這一點。我知道那裏有一些jQuery插件，但在Joomla中，我必須用「jQuery」替換所有$ -tags，並且在每個文件中都這樣做很煩人。

此致敬禮。

.box-outer { 
 
    width: 20rem; 
 
    height: 6rem; 
 
    position: relative; 
 
} 
 

 
.arrow-left { 
 
    position: absolute; 
 
    width: 2rem; 
 
    height: 2rem; 
 
    top: 1.5rem; 
 
    left: 0rem; 
 
    z-index: 1; 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
} 
 

 
.arrow-right { 
 
    position: absolute; 
 
    width: 2rem; 
 
    height: 2rem; 
 
    top: 1.5rem; 
 
    right: 10rem; 
 
    z-index: 1; 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
} 
 

 
.box-inner { 
 
    width: 10rem; 
 
    height: 6rem; 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
} 
 

 
.thumb { 
 
    height: 5rem; 
 
    width: 2rem; 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
}

<div class="box-outer"> 
 
    <a class="arrow-left">L</a> 
 
    <a class="arrow-right">R</a> 
 
    <div class="box-inner"> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    </div> 
 
</div>

Answer 1

您可以使用）

var box = $(".box-inner"), x; 
 
$(".arrow").click(function() { 
 
    if ($(this).hasClass("arrow-right")) { 
 
    x = ((box.width()/2)) + box.scrollLeft(); 
 
    box.animate({ 
 
     scrollLeft: x, 
 
    }) 
 
    } else { 
 
    x = ((box.width()/2)) - box.scrollLeft(); 
 
    box.animate({ 
 
     scrollLeft: -x, 
 
    }) 
 
    } 
 
})

.box-outer { 
 
    width: 20rem; 
 
    height: 6rem; 
 
    position: relative; 
 
} 
 
.arrow-left { 
 
    position: absolute; 
 
    width: 2rem; 
 
    height: 2rem; 
 
    top: 1.5rem; 
 
    left: 0rem; 
 
    z-index: 1; 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
} 
 
.arrow-right { 
 
    position: absolute; 
 
    width: 2rem; 
 
    height: 2rem; 
 
    top: 1.5rem; 
 
    right: 10rem; 
 
    z-index: 1; 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
} 
 
.box-inner { 
 
    width: 10rem; 
 
    height: 6rem; 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
} 
 
.thumb { 
 
    height: 5rem; 
 
    width: 2rem; 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="box-outer"> 
 
    <a class="arrow-left arrow">L</a> 
 
    <a class="arrow-right arrow">R</a> 
 
    <div class="box-inner"> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    <div class="thumb"></div> 
 
    </div> 
 
</div>

Fiddle

Answer 2

你去那裏！這裏使用一些簡單的jQuery :)解決方案

http://codepen.io/AxelCardinaels/pen/rxMrem

HTML：

<div class="box-outer"> 
    <a class="arrow-left">L</a> 
    <a class="arrow-right">R</a> 
    <div class="box-inner"> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    <div class="thumb"></div> 
    </div> 
</div> 

CSS：

.box-outer { 
    width: 20rem; 
    height: 6rem; 
    position: relative; 
} 

.arrow-left { 
    position: absolute; 
    width: 2rem; 
    height: 2rem; 
    top: 1.5rem; 
    left: 0rem; 
    z-index: 1; 
    background-color: yellow; 
    border: 1px solid black; 
} 

.arrow-right { 
    position: absolute; 
    width: 2rem; 
    height: 2rem; 
    top: 1.5rem; 
    right: 10rem; 
    z-index: 1; 
    background-color: yellow; 
    border: 1px solid black; 
} 

.box-inner { 
    width: 10rem; 
    height: 6rem; 
    position: absolute; 
    white-space: nowrap; 
    overflow-y: hidden; 
    overflow-x: scroll; 
} 

.thumb { 
    height: 5rem; 
    width: 2rem; 
    background-color: green; 
    border: 1px solid black; 
    display: inline-block; 
} 

JS：

$(".arrow-left").click(function(){ 
    // To get actual position 
    var actualScroll = $(".box-inner").scrollLeft(); 
    // To set new position 
    $(".box-inner").scrollLeft(actualScroll+50) 
}) 

希望這是你WER什麼e尋找！

Answer 3

FIDDLE：

$('a').click(function() {  
    switch ($(this).text()) { 
    case "L": 
    $('.box-inner').scrollLeft(-300); 
    break; 

    case "R": 
    $('.box-inner').scrollLeft(300); 
    break; 
    } 
}); 

Answer 4

使用jQuery像下面........

$(".arrow-left").click(function() { 
    var leftPos = $('.box-inner').scrollLeft(); 
    $(".box-inner").animate({scrollLeft: leftPos - 50}, 1); 
}); 

$(".arrow-right").click(function() { 
    var leftPos = $('.box-inner').scrollLeft(); 
    $(".box-inner").animate({scrollLeft: leftPos + 50}, 1); 
    }); 

編輯：這裏是更新小提琴https://jsfiddle.net/wsemLhtz/5/