我有一个滚动div，当我点击它时我想要一个事件，它会强制它div滚动以查看里面的元素。我这样写它的JavasSript：
document.getElementById(chr).scrollIntoView(true);
但这会在滚动div自身的同时滚动所有页面。如何解决？
我想这样说：
MyContainerDiv.getElementById(chr).scrollIntoView(true);
amrelgarhy
问问题
505778 次
16 回答
429
您需要获取要滚动到视图中的元素相对于其父级（滚动 div 容器）的顶部偏移量：
var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;
变量 topPos 现在设置为滚动 div 顶部和您希望可见的元素之间的距离（以像素为单位）。
现在我们使用以下命令告诉 div 滚动到该位置scrollTop：
document.getElementById('scrolling_div').scrollTop = topPos;
如果你使用原型 JS 框架，你会做同样的事情：
var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];
同样，这将滚动 div 以使您希望看到的元素正好位于顶部（或者如果这不可能，则尽可能向下滚动以使其可见）。
于 2009-10-20T05:19:09.783 回答
73
您必须在要滚动到的 DIV 中找到元素的位置，然后设置 scrollTop 属性。
divElem.scrollTop = 0;
更新：
上移或下移的示例代码
function move_up() {
document.getElementById('divElem').scrollTop += 10;
}
function move_down() {
document.getElementById('divElem').scrollTop -= 10;
}
于 2009-03-11T18:18:52.940 回答
64
方法 1 - 平滑滚动到元素内的元素
var box = document.querySelector('.box'),
targetElm = document.querySelector('.boxChild'); // <-- Scroll to here within ".box"
document.querySelector('button').addEventListener('click', function(){
scrollToElm( box, targetElm , 600 );
});
/////////////
function scrollToElm(container, elm, duration){
var pos = getRelativePos(elm);
scrollTo( container, pos.top , 2); // duration in seconds
}
function getRelativePos(elm){
var pPos = elm.parentNode.getBoundingClientRect(), // parent pos
cPos = elm.getBoundingClientRect(), // target pos
pos = {};
pos.top = cPos.top - pPos.top + elm.parentNode.scrollTop,
pos.right = cPos.right - pPos.right,
pos.bottom = cPos.bottom - pPos.bottom,
pos.left = cPos.left - pPos.left;
return pos;
}
function scrollTo(element, to, duration, onDone) {
var start = element.scrollTop,
change = to - start,
startTime = performance.now(),
val, now, elapsed, t;
function animateScroll(){
now = performance.now();
elapsed = (now - startTime)/1000;
t = (elapsed/duration);
element.scrollTop = start + change * easeInOutQuad(t);
if( t < 1 )
window.requestAnimationFrame(animateScroll);
else
onDone && onDone();
};
animateScroll();
}
function easeInOutQuad(t){ return t<.5 ? 2*t*t : -1+(4-2*t)*t };.box{ width:80%; border:2px dashed; height:180px; overflow:auto; }
.boxChild{
margin:600px 0 300px;
width: 40px;
height:40px;
background:green;
}<button>Scroll to element</button>
<div class='box'>
<div class='boxChild'></div>
</div>方法 2 - 使用Element.scrollIntoView：
请注意，浏览器支持不是很好
var targetElm = document.querySelector('.boxChild'), // reference to scroll target
button = document.querySelector('button'); // button that triggers the scroll
// bind "click" event to a button
button.addEventListener('click', function(){
targetElm.scrollIntoView()
}).box {
width: 80%;
border: 2px dashed;
height: 180px;
overflow: auto;
scroll-behavior: smooth; /* <-- for smooth scroll */
}
.boxChild {
margin: 600px 0 300px;
width: 40px;
height: 40px;
background: green;
}<button>Scroll to element</button>
<div class='box'>
<div class='boxChild'></div>
</div>方法 3 - 使用 CSS滚动行为：
.box {
width: 80%;
border: 2px dashed;
height: 180px;
overflow-y: scroll;
scroll-behavior: smooth; /* <--- */
}
#boxChild {
margin: 600px 0 300px;
width: 40px;
height: 40px;
background: green;
}<a href='#boxChild'>Scroll to element</a>
<div class='box'>
<div id='boxChild'></div>
</div>于 2018-06-23T22:48:26.050 回答
25
原生 JS，跨浏览器，平滑滚动（2020 更新）
设置ScrollTop确实给出了预期的结果，但滚动非常突然。使用jquery平滑滚动不是一种选择。因此，这是一种支持所有主要浏览器的完成工作的本机方式。参考 - caniuse
// get the "Div" inside which you wish to scroll (i.e. the container element)
const El = document.getElementById('xyz');
// Lets say you wish to scroll by 100px,
El.scrollTo({top: 100, behavior: 'smooth'});
// If you wish to scroll until the end of the container
El.scrollTo({top: El.scrollHeight, behavior: 'smooth'});
就是这样！
这是一个给怀疑者的工作片段 -
document.getElementById('btn').addEventListener('click', e => {
e.preventDefault();
// smooth scroll
document.getElementById('container').scrollTo({top: 175, behavior: 'smooth'});
});/* just some styling for you to ignore */
.scrollContainer {
overflow-y: auto;
max-height: 100px;
position: relative;
border: 1px solid red;
width: 120px;
}
body {
padding: 10px;
}
.box {
margin: 5px;
background-color: yellow;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
#goose {
background-color: lime;
}<!-- Dummy html to be ignored -->
<div id="container" class="scrollContainer">
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div id="goose" class="box">goose</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
</div>
<button id="btn">goose</button>更新：正如您在评论中看到的那样，IE11 似乎Element.scrollTo()不支持。因此，如果您不关心 IE11（您真的不应该），请随意在您的所有项目中使用它。请注意，存在对 Edge 的支持！所以你并没有真正把你的 Edge/Windows 用户抛在后面；）
于 2019-12-10T10:49:50.707 回答
17
要将元素滚动到 div 的视图中，仅在需要时，您可以使用此scrollIfNeeded功能：
function scrollIfNeeded(element, container) {
if (element.offsetTop < container.scrollTop) {
container.scrollTop = element.offsetTop;
} else {
const offsetBottom = element.offsetTop + element.offsetHeight;
const scrollBottom = container.scrollTop + container.offsetHeight;
if (offsetBottom > scrollBottom) {
container.scrollTop = offsetBottom - container.offsetHeight;
}
}
}
document.getElementById('btn').addEventListener('click', ev => {
ev.preventDefault();
scrollIfNeeded(document.getElementById('goose'), document.getElementById('container'));
});.scrollContainer {
overflow-y: auto;
max-height: 100px;
position: relative;
border: 1px solid red;
width: 120px;
}
body {
padding: 10px;
}
.box {
margin: 5px;
background-color: yellow;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
#goose {
background-color: lime;
}<div id="container" class="scrollContainer">
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div id="goose" class="box">goose</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
</div>
<button id="btn">scroll to goose</button>于 2017-08-24T01:16:47.207 回答
11
代码应该是：
var divElem = document.getElementById('scrolling_div');
var chElem = document.getElementById('element_within_div');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;
您想要滚动子顶部位置和 div 顶部位置之间的差异。
使用以下方式访问子元素：
var divElem = document.getElementById('scrolling_div');
var numChildren = divElem.childNodes.length;
等等....
于 2015-10-19T21:33:34.797 回答
9
如果您使用的是 jQuery，则可以使用以下内容滚动动画：
$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});
动画是可选的：您也可以将上面计算的 scrollTop 值直接放入容器的scrollTop属性中。
于 2017-06-20T18:17:14.260 回答
8
我们可以在不使用 JQuery 和其他库的情况下解决这个问题。
为此，我编写了以下代码：
你有类似的结构->
<div class="parent">
<div class="child-one">
</div>
<div class="child-two">
</div>
</div>
JS：
scrollToElement() {
var parentElement = document.querySelector('.parent');
var childElement = document.querySelector('.child-two');
parentElement.scrollTop = childElement.offsetTop - parentElement.offsetTop;
}
我们可以很容易地重写这个方法来传递父母和孩子作为参数
于 2020-08-24T14:31:02.597 回答
4
另一个使用 jQuery 和 animate 的例子。
var container = $('#container');
var element = $('#element');
container.animate({
scrollTop: container.scrollTop = container.scrollTop() + element.offset().top - container.offset().top
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function (e) {
console.log("animation completed");
}
});
于 2018-05-22T23:49:57.577 回答
3
有两个事实：
1) safari 不支持组件 scrollIntoView。
2）JS框架jQuery可以做这样的工作：
parent = 'some parent div has css position==="fixed"' || 'html, body';
$(parent).animate({scrollTop: $(child).offset().top}, duration)
于 2019-03-05T12:25:16.837 回答
2
这是一个简单的纯 JavaScript 解决方案，适用于目标 Number（的值scrollTop）、目标 DOM 元素或一些特殊的 String 情况：
/**
* target - target to scroll to (DOM element, scrollTop Number, 'top', or 'bottom'
* containerEl - DOM element for the container with scrollbars
*/
var scrollToTarget = function(target, containerEl) {
// Moved up here for readability:
var isElement = target && target.nodeType === 1,
isNumber = Object.prototype.toString.call(target) === '[object Number]';
if (isElement) {
containerEl.scrollTop = target.offsetTop;
} else if (isNumber) {
containerEl.scrollTop = target;
} else if (target === 'bottom') {
containerEl.scrollTop = containerEl.scrollHeight - containerEl.offsetHeight;
} else if (target === 'top') {
containerEl.scrollTop = 0;
}
};
以下是一些使用示例：
// Scroll to the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget('top', scrollableDiv);
或者
// Scroll to 200px from the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget(200, scrollableDiv);
或者
// Scroll to targetElement
var scrollableDiv = document.getElementById('scrollable_div');
var targetElement= document.getElementById('target_element');
scrollToTarget(targetElement, scrollableDiv);
于 2018-01-24T18:29:35.797 回答
1
假设你有一个需要在里面滚动的 div 元素，试试这段代码
document.querySelector('div').scroll(x,y)
这适用于我在带有滚动的 div 中，如果您将鼠标指向此元素然后尝试向下或向上滚动，这应该适用于您。如果它手动工作，它也应该工作
于 2020-05-20T11:06:11.150 回答
0
用户动画滚动
这是一个如何在没有JQuery<div>的情况下以编程方式水平滚动的示例。要垂直滚动，您可以将 JavaScript 的写入替换为, 。 scrollLeftscrollTop
JSFiddle
https://jsfiddle.net/fNPvf/38536/
HTML
<!-- Left Button. -->
<div style="float:left;">
<!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
<input type="button" value="«" style="height: 100px;" onmousedown="scroll('scroller',3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<!-- <3 -->
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
<!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
<input type="button" value="»" style="height: 100px;" onmousedown="scroll('scroller',-3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
JavaScript
// Declare the Shared Timer.
var TIMER_SCROLL;
/**
Scroll function.
@param id Unique id of element to scroll.
@param d Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scroll(id, d, del){
// Scroll the element.
document.getElementById(id).scrollLeft += d;
// Perform a delay before recursing this function again.
TIMER_SCROLL = setTimeout("scroll('"+id+"',"+d+", "+del+");", del);
}
归功于Dux。
自动动画滚动
此外，这里还有<div>完全左右滚动 a 的功能。我们在这里唯一改变的是，在再次递归调用滚动之前，我们检查滚动的完整扩展是否已被利用。
JSFiddle
https://jsfiddle.net/0nLc2fhh/1/
HTML
<!-- Left Button. -->
<div style="float:left;">
<!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
<input type="button" value="«" style="height: 100px;" onclick="scrollFullyLeft('scroller',3, 10);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<!-- <3 -->
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
<!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
<input type="button" value="»" style="height: 100px;" onclick="scrollFullyRight('scroller',3, 10);"/>
</div>
JavaScript
// Declare the Shared Timer.
var TIMER_SCROLL;
/**
Scroll fully left function; completely scrolls a <div> to the left, as far as it will go.
@param id Unique id of element to scroll.
@param d Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyLeft(id, d, del){
// Fetch the element.
var el = document.getElementById(id);
// Scroll the element.
el.scrollLeft += d;
// Have we not finished scrolling yet?
if(el.scrollLeft < (el.scrollWidth - el.clientWidth)) {
TIMER_SCROLL = setTimeout("scrollFullyLeft('"+id+"',"+d+", "+del+");", del);
}
}
/**
Scroll fully right function; completely scrolls a <div> to the right, as far as it will go.
@param id Unique id of element to scroll.
@param d Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyRight(id, d, del){
// Fetch the element.
var el = document.getElementById(id);
// Scroll the element.
el.scrollLeft -= d;
// Have we not finished scrolling yet?
if(el.scrollLeft > 0) {
TIMER_SCROLL = setTimeout("scrollFullyRight('"+id+"',"+d+", "+del+");", del);
}
}
于 2017-04-06T15:53:33.307 回答
0
这就是最终为我服务的东西
/** Set parent scroll to show element
* @param element {object} The HTML object to show
* @param parent {object} The HTML object where the element is shown */
var scrollToView = function(element, parent) {
//Algorithm: Accumulate the height of the previous elements and add half the height of the parent
var offsetAccumulator = 0;
parent = $(parent);
parent.children().each(function() {
if(this == element) {
return false; //brake each loop
}
offsetAccumulator += $(this).innerHeight();
});
parent.scrollTop(offsetAccumulator - parent.innerHeight()/2);
}
于 2018-02-27T15:08:14.583 回答
0
其他答案都没有解决我的问题。
我玩弄了scrollIntoView参数并设法找到了解决方案。设置inlinetostart和blocktonearest防止父元素（或整个页面）滚动：
document.getElementById(chr).scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start'
});
于 2022-02-14T21:18:05.697 回答
-1
浏览器会自动滚动到一个获得焦点的元素，所以你也可以用它来包装你需要滚动到的元素，<a>...</a>然后当你需要滚动时，只需将焦点设置在那个a
于 2019-03-21T01:46:32.753 回答