滚动到水平div中的元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动到水平div中的元素相关的知识，希望对你有一定的参考价值。
我有一个横向div：
我需要通过javascript按钮滚动到此div中的特定元素（必须将click div滚动到该元素之后）。我怎样才能做到这一点？
<div class="group" id="frames">
<div class="item frames-item">
<img src="1.jpg">
</div>
<div class="item frames-item">
<img src="2.jpg">
</div>
....
....
</div>
答案
$.scrollTo是你的朋友：
$(container).scrollTo(target)
另一答案
或者您可以使用以下代码段：
$('.scrollable').animate({scrollLeft: $('#dstElement').position().left}, 500);
如果可滚动定位，position()将#dstElement的相对位置返回到`.scrollable'。
Code & Demo
var $scroller = $('.scroller');
// assign click handler
$('button').on('click', function () {
// get the partial id of the div to scroll to
var divIdx = $('input').val();
// retrieve the jquery ref to the div
var scrollTo = $('#d'+divIdx)
// change its bg
.css('background', '#9f3')
// retrieve its position relative to its parent
.position().left;
console.log(scrollTo);
// simply update the scroll of the scroller
// $('.scroller').scrollLeft(scrollTo);
// use an animation to scroll to the destination
$scroller
.animate({'scrollLeft': scrollTo}, 500);
}); .scroller {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.container {
position: relative; /*important for the .position() method */
height: 100px;
width: 770px;
}
.container div {
height: 90px;
width: 60px;
float: left;
margin: 5px;
background: #39f;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
<div class="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<!-- ... -->
</div>
</div>
<button>Scroll to: </button> <input type="text" value="4"/>另一答案
尝试使用以下功能在点击中将元素或li置于中心
function centerItVariableWidth(target, outer){
var out = $(outer);
var tar = $(target);
var x = out.width();
var y = tar.outerWidth(true);
var z = tar.index();
var q = 0;
var m = out.find('li');
//Just need to add up the width of all the elements before our target.
for(var i = 0; i < z; i++){
q+= $(m[i]).outerWidth(true);
}
out.scrollLeft(Math.max(0, q - (x - y)/2));
}
另一答案
下面的代码应该可以解决问题：
document.addEventListener('DOMContentLoaded', function () {
var frames = document.getElementById('frames');
frames.addEventListener('click', function (e) {
if (e.target.classList.contains('item')) {
e.target.parentNode.scrollLeft = e.target.offsetLeft;
}
});
}); body {
background: red;
}
.group{
width: 300px;
display: flex;
position: relative; /* This is important for the js offsetLeft property */
overflow-x: scroll;
}
.item{
width: 200px;
background: #eee;
margin-right: 10px;
} <div class="group" id="frames">
<div class="item frames-item">paul</div>
<div class="item frames-item">coucou</div>
<div class="item frames-item">jojoij</div>
<div class="item frames-item">zoie</div>
<div class="item frames-item">foez</div>
<div class="item frames-item">popze</div>
<div class="item frames-item">kvk</div>
<div class="item frames-item">poe</div>
<div class="item frames-item">hfihuazf</div>
<div class="item frames-item">jeeze</div>
<div class="item frames-item">pposd</div>
<div class="item frames-item">nvnn</div>
</div>
另一答案
$(".ui-jqgrid-bdiv").scrollLeft(400);
这将适用于jqgrid以及div
另一答案
如果你有一个具有内部水平滚动的元素，你可以按照我的示例执行：使用两个带有类的箭头，将元素滚动到两侧。
在这种情况下，我有类.tabs，我需要移动。 500是设置此滚动动画的时间（以毫秒为单位），因此您可以拥有自己的滑块。
var scroll = 0;
$('.js-move-list-right').click(function(){
scroll = scroll + 400;
$('#timeline .tabs').animate({scrollLeft: scroll}, 500);
});
$('.js-move-list-left').click(function(){
scroll = scroll - 400;
$('#timeline .tabs').animate({scrollLeft: scroll}, 500);
});
以上是关于滚动到水平div中的元素的主要内容，如果未能解决你的问题，请参考以下文章