scrollTo & js auto scroll & scrollX & scrollY
scrollTo & js auto scroll & scrollX & scrollY
scrollX & scrollY
获取 scroll top height
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
demo
https://codepen.io/xgqfrms/pen/MWKYxBb?editors=1011
https://stackoverflow.com/a/51133452/5934465
https://javascript.info/size-and-scroll-window
Window scroll
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTop
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
window.scrollTo(x-coord, y-coord)
window.scrollTo(options)
window.scroll(x-coord, y-coord)
window.scroll(options)
<button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>
// options
window.scroll({
top: 100,
left: 100,
behavior: 'smooth'
});
Element scroll
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll
element.scrollTo(x-coord, y-coord)
element.scrollTo(options)
element.scroll(x-coord, y-coord)
element.scroll(options)
element.scrollTo(0, 1000);
// options
element.scrollTo({
top: 100,
left: 100,
behavior: 'smooth'
});
ScrollToOptions
https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions
Window.scroll()
Window.scrollBy()
Window.scrollTo()
Element.scroll()
Element.scrollBy()
Element.scrollTo()
demo
form.addEventListener('submit', (e) => {
e.preventDefault();
var scrollOptions = {
left: leftInput.value,
top: topInput.value,
behavior: scrollInput.checked ? 'smooth' : 'auto'
}
window.scrollTo(scrollOptions);
});
https://github.com/mdn/dom-examples/tree/master/scrolltooptions
https://mdn.github.io/dom-examples/scrolltooptions/
live demo
https://codepen.io/xgqfrms/pen/yLYLeKb?editors=1111
scroll calendar
scroll tab
refs
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/12666197.html
未经授权禁止转载,违者必究!