我正在使用 Javascript 方法Element.scrollIntoView()
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
有什么办法可以让我知道滚动何时结束。假设有一个动画，或者我已经设置了{behavior: smooth}.
我假设滚动是异步的，想知道是否有任何类似机制的回调。
如何知道滚动到元素是在 Javascript 中完成的？
IT技术
javascript
scroll
js-scrollintoview
2021-01-20 10:56:36
6个回答
没有scrollEnd事件，但您可以监听该scroll事件并检查它是否仍在滚动窗口：
var scrollTimeout;
addEventListener('scroll', function(e) {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function() {
console.log('Scroll ended');
}, 100);
});
您可以使用IntersectionObserver，检查是否元素.isIntersecting在IntersectionObserver回调函数
const element = document.getElementById("box");
const intersectionObserver = new IntersectionObserver((entries) => {
let [entry] = entries;
if (entry.isIntersecting) {
setTimeout(() => alert(`${entry.target.id} is visible`), 100)
}
});
// start observing
intersectionObserver.observe(box);
element.scrollIntoView({behavior: "smooth"});body {
height: calc(100vh * 2);
}
#box {
position: relative;
top:500px;
}<div id="box">
box
</div>对于这种“平滑”行为，所有规范都说的是
当用户代理是执行滚动盒框位置的平滑滚动，它必须更新框的滚动位置的用户代理定义的方式在用户代理定义的时间量。
（强调我的）
因此，不仅没有单个事件在完成后会触发，而且我们甚至无法假设不同浏览器之间的任何稳定行为。
事实上，当前的 Firefox 和 Chrome 的行为已经有所不同：
- Firefox 似乎有一个固定的持续时间设置，无论滚动距离是多少，它都会在这个固定的持续时间（~500ms）内完成
- 另一方面，Chrome将使用速度，即操作的持续时间将根据滚动距离而有所不同，硬限制为 3 秒。
因此，这已经取消了针对此问题的所有基于超时的解决方案的资格。
现在，这里的一个答案建议使用 IntersectionObserver，这不是一个太糟糕的解决方案，但不太便携，并且没有考虑inline和block选项。
所以最好的办法实际上可能是定期检查我们是否停止滚动。为了以非侵入性的方式做到这一点，我们可以启动一个requestAnimationFrame动力循环，这样我们的检查每帧只执行一次。
这是一个这样的实现，它将返回一个 Promise，一旦滚动操作完成，该 Promise 将得到解决。
注意：这段代码遗漏了一种检查操作是否成功的方法，因为如果页面上发生了其他滚动操作，所有当前的滚动操作都会被取消，但我将把它作为读者的练习。
const buttons = [ ...document.querySelectorAll( 'button' ) ];
document.addEventListener( 'click', ({ target }) => {
// handle delegated event
target = target.closest('button');
if( !target ) { return; }
// find where to go next
const next_index = (buttons.indexOf(target) + 1) % buttons.length;
const next_btn = buttons[next_index];
const block_type = target.dataset.block;
// make it red
document.body.classList.add( 'scrolling' );
smoothScroll( next_btn, { block: block_type })
.then( () => {
// remove the red
document.body.classList.remove( 'scrolling' );
} )
});
/*
*
* Promised based scrollIntoView( { behavior: 'smooth' } )
* @param { Element } elem
** ::An Element on which we'll call scrollIntoView
* @param { object } [options]
** ::An optional scrollIntoViewOptions dictionary
* @return { Promise } (void)
** ::Resolves when the scrolling ends
*
*/
function smoothScroll( elem, options ) {
return new Promise( (resolve) => {
if( !( elem instanceof Element ) ) {
throw new TypeError( 'Argument 1 must be an Element' );
}
let same = 0; // a counter
let lastPos = null; // last known Y position
// pass the user defined options along with our default
const scrollOptions = Object.assign( { behavior: 'smooth' }, options );
// let's begin
elem.scrollIntoView( scrollOptions );
requestAnimationFrame( check );
// this function will be called every painting frame
// for the duration of the smooth scroll operation
function check() {
// check our current position
const newPos = elem.getBoundingClientRect().top;
if( newPos === lastPos ) { // same as previous
if(same ++ > 2) { // if it's more than two frames
/* @todo: verify it succeeded
* if(isAtCorrectPosition(elem, options) {
* resolve();
* } else {
* reject();
* }
* return;
*/
return resolve(); // we've come to an halt
}
}
else {
same = 0; // reset our counter
lastPos = newPos; // remember our current position
}
// check again next painting frame
requestAnimationFrame(check);
}
});
}p {
height: 400vh;
width: 5px;
background: repeat 0 0 / 5px 10px
linear-gradient(to bottom, black 50%, white 50%);
}
body.scrolling {
background: red;
}<button data-block="center">scroll to next button <code>block:center</code></button>
<p></p>
<button data-block="start">scroll to next button <code>block:start</code></button>
<p></p>
<button data-block="nearest">scroll to next button <code>block:nearest</code></button>
<p></p>
<button>scroll to top</button>使用 rxjs 对我有用的解决方案
语言：typescript
scrollToElementRef(
element: HTMLElement,
options?: ScrollIntoViewOptions,
emitFinish = false,
): void | Promise<boolean> {
element.scrollIntoView(options);
if (emitFinish) {
return fromEvent(window, 'scroll')
.pipe(debounceTime(100), first(), mapTo(true)).toPromise();
}
}
用法：
const element = document.getElementById('ELEM_ID');
scrollToElementRef(elment, {behavior: 'smooth'}, true).then(() => {
// scroll finished do something
})
即使在滚动完成后，上面的这些答案也会保留事件处理程序（这样如果用户滚动，他们的方法就会继续被调用）。如果不需要滚动，他们也不会通知您。这是一个稍微好一点的答案：
$("#mybtn").click(function() {
$('html, body').animate({
scrollTop: $("div").offset().top
}, 2000);
$("div").html("Scrolling...");
callWhenScrollCompleted(() => {
$("div").html("Scrolling is completed!");
});
});
// Wait for scrolling to stop.
function callWhenScrollCompleted(callback, checkTimeout = 200, parentElement = $(window)) {
const scrollTimeoutFunction = () => {
// Scrolling is complete
parentElement.off("scroll");
callback();
};
let scrollTimeout = setTimeout(scrollTimeoutFunction, checkTimeout);
parentElement.on("scroll", () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(scrollTimeoutFunction, checkTimeout);
});
}body { height: 2000px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mybtn">Scroll to Text</button>
<br><br><br><br><br><br><br><br>
<div>example text</div>其它你可能感兴趣的问题