jQuery 滚动到水平 div 中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17574628/
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 to element in horizontal div
提问by ysokolovsky
I have a horizontal div:
我有一个水平 div：
i need to scroll to the specific element in this div via JavaScript button (after the click div must be scrolled to that element). How can I do this?
我需要通过 JavaScript 按钮滚动到此 div 中的特定元素（点击 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>
采纳答案by moonwave99
回答by Matyas
Or you could use the following snippet:
或者您可以使用以下代码段：
$('.scrollable').animate({scrollLeft: $('#dstElement').position().left}, 500);
Where position()returns the #dstElement's relative position to `.scrollable' if scrollable is positioned.
如果定位可滚动，则whereposition()将#dstElement's 相对位置返回到 `.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"/>回答by Amit
Try below function to make element or li in center on click
尝试使用以下功能在单击时使元素或 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));
}
回答by ling
The code below should do the trick:
下面的代码应该可以解决问题：
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>
回答by Hemant
$(".ui-jqgrid-bdiv").scrollLeft(400);
This will work in jqgrid as well as div
这将适用于 jqgrid 以及 div
回答by Lukas Alarcon
If you have an element, that has inner horizontal scroll, you can do as followed by my example: Two arrows with classes that are used, will scroll the element to sides.
如果您有一个具有内部水平滚动的元素，您可以按照我的示例进行操作：使用类的两个箭头将元素滚动到两侧。
In this case, I have with class .tabs which I need to move. The 500 is time in miliseconds to animate this scroll, so you can kind of have your own slider..
在这种情况下，我有需要移动的类 .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);
});
回答by Md Sabbul Ansari
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="7"/>