jQuery 使用jquery中的左右箭头水平滚动div内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27313480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll div content horizontally using left and right arrow in jquery
提问by Arockiaraj
I Want to scroll div contents using two buttons 
我想使用两个按钮滚动 div 内容
HTML Coding is given below:
HTML编码如下：
<div class="bstimeslider">
<a href="#"> <img src="images/left.png" ></a>
<div class="tslshow">
<div class="bktibx"> 12:00 </div>
<div class="bktibx"> 12:30 </div>
<div class="bktibx"> 13:00 </div>
<div class="bktibx"> 13:30 </div>
<div class="bktibx"> 14:00 </div>
<div class="bktibx"> 14:30 </div>
<div class="bktibx"> 15:00 </div>
<div class="bktibx"> 15:30 </div>
<div class="bktibx"> 16:00 </div>
<div class="bktibx"> 16:30 </div>
<div class="bktibx"> 17:00 </div>
<div class="bktibx"> 17:30 </div>
</div>
<a href="#"><img src="images/right.png"></a>
Now only 15:00 is displaying when i scroll right button it should show from 15:30 to 17:30..
现在只有 15:00 显示，当我向右滚动按钮时，它应该从 15:30 显示到 17:30 ..
Similarly when i click left arrow it should scroll left..
同样，当我单击左箭头时，它应该向左滚动..
Using Jquery i want to perform this. Any opensource plugin is available.
使用 Jquery 我想执行此操作。任何开源插件都可用。
回答by Marian Gibala
It's just a simple example, but you can see the point - how to do it.
这只是一个简单的例子，但你可以看到重点——如何去做。
HTML:
HTML：
<div class="bstimeslider">
<div id="rightArrow"></div>
<div id="viewContainer">
<div id="tslshow">
<div class="bktibx"> 12:00 </div>
<div class="bktibx"> 12:30 </div>
<div class="bktibx"> 13:00 </div>
<div class="bktibx"> 13:30 </div>
<div class="bktibx"> 14:00 </div>
<div class="bktibx"> 14:30 </div>
<div class="bktibx"> 15:00 </div>
<div class="bktibx"> 15:30 </div>
<div class="bktibx"> 16:00 </div>
<div class="bktibx"> 16:30 </div>
<div class="bktibx"> 17:00 </div>
<div class="bktibx"> 17:30 </div>
</div>
</div>
<div id="leftArrow"></div>
</div>
CSS:
CSS：
.bstimeslider {
width:500px;
height:40px;
background:#ccc;
position:relative;
}
.bktibx {
float:left;
margin:0 40px 0 0 ;
font-size:18px;
width:60px;
display:block;
background:#000;
color:#fff;
}
#tslshow {
position:absolute;
left:0;
width:1200px;
}
#leftArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
left:0px;
}
#rightArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
right:0px;
}
#viewContainer {
width:360px;
height:100%;
background:#00ff00;
position:absolute;
left:50%;
margin-left:-180px;
overflow:hidden;
}
JavaScript:
JavaScript：
var view = $("#tslshow");
var move = "100px";
var sliderLimit = -750;
$("#rightArrow").click(function(){
var currentPosition = parseInt(view.css("left"));
if (currentPosition >= sliderLimit) view.stop(false,true).animate({left:"-="+move},{ duration: 400})
});
$("#leftArrow").click(function(){
var currentPosition = parseInt(view.css("left"));
if (currentPosition < 0) view.stop(false,true).animate({left:"+="+move},{ duration: 400});
});
Fiddle: http://jsfiddle.net/yfqyq9a9/2/
回答by Colin
You can alter the style of the scrollbar using regular old CSS:
您可以使用常规的旧 CSS 更改滚动条的样式：
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
