JavaScript Roll to Element
document.getElementById("divId").scrollIntoView();
doilooklikeiselldrugs
document.getElementById("divId").scrollIntoView();//scroll to the bottom of "#myDiv"
var myDiv = document.getElementById("myDiv");
myDiv.scrollTop = myDiv.scrollHeight;const options = {
inline: 'start',
block: 'start',
behavior: 'smooth'
}
htmlDiv.scrollIntoView(options)
/*
- behavior Optional
Defines the transition animation. One of auto or smooth. Defaults to auto.
- block Optional
Defines vertical alignment. One of start, center, end, or nearest.
Defaults to start.
- inline Optional
Defines horizontal alignment. One of start, center, end, or nearest.
Defaults to nearest.
*/// 1.
// <a class="nav__link" href="#section--1">Features</a>
document.querySelectorAll('.nav__link').forEach(item => {
item.addEventListener('click', function (e) {
e.preventDefault();
document
.querySelector(this.getAttribute('href'))
.scrollIntoView({ behavior: 'smooth' });
});
});
// 2.
// <ul class="nav__links"> ...
// <a class="nav__link" href="#section--1">Features</a>
document.querySelector('.nav__links').addEventListener('click', function (e) {
e.preventDefault();
if (e.target.classList.contains('nav__link')) {
document
.querySelector(e.target.getAttribute('href'))
.scrollIntoView({ behavior: 'smooth' });
}
});const assert = require('assert')
describe('v5.webdriver.io', () => {
it('should demonstrate the scrollIntoView command', async () => {
await browser.url('https://v5.webdriver.io');
const GitHub = await $('#footer [href="https://github.com/webdriverio/webdriverio"]')
await GitHub.scrollIntoView();// scroll to specific element
await browser.pause(4000);
})
it('should demonstrate the scrollIntoView command', async () => {
await browser.url('https://v5.webdriver.io');
const getstarted = await $('[src="https://badge.fury.io/js/webdriverio.svg"]')
await getstarted.scrollIntoView();// scroll to specific element
await browser.pause(4000);
})
})