xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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 发布文章使用：只允许注册用户才可以访问！

---