I have a script that scrolls the window on button click. Works fine, but how do I get this to a target div only? I mean only to scroll a specific div.
I tried to put getElementById but I didn't succeed.
Is it even possible with scrollBy to do this?
<button onmousedown="skrull();" onmouseup="stop();" style="position:fixed;">Click to scroll <3</button>
<p>Some text and line breaks to enable scrolling!</p>
<script>
var skrullInterval;
function scrollWin() {
window.scrollBy(0, 100);
}
skrull = function skree() {skrullInterval = setInterval(scrollWin, 100);}
function stop() {
clearInterval(skrullInterval);
}
</script>
scrollBy() and scroll() are defined for the window object only. If you want to scroll an element you should set scrollTop to the desired offset (absolute value, unlike what scrollBy() takes; negative values are silently converted to 0).
element.scrollTop = 50;
From MDN:
The Element.scrollTop property gets or sets the number of pixels that
an element's content is scrolled vertically.
An element's scrollTop value is a measurement of the distance from the
element's top to its topmost visible content. When an element's
content does not generate a vertical scrollbar, then its scrollTop
value is 0.
Scrolling horizontally is also possible with scrollLeft. Keep in mind this though if you have to deal with right-to-left direction:
Note that if the element's direction of the element is rtl
(right-to-left) then scrollLeft is 0 when the scrollbar is at its
rightmost position (at start of the scrolled content) and then
increasingly negative as you scroll towards the end of the content.
Related
I am using css scroll snap to scroll through that are 100vh in height. The scroll snap works beautifully.
That said I need to determine how far the site visitor has scrolled for a few different reasons.
I have tried:
let wrapper = document.getElementById('landing-page-wrapper');
console.log(wrapper.offsetTop);
console.log(window.scrollY);
I have also tried window.scrollTop, wrapper.scrollTop and more.
Here is a Codepen of what I am seeing
How can I know the distance scrolled while using 100vh sections and css scroll-snap
TIA
Based on your shared code, the reason why window.onscroll does not work as expected is because neither window nor document.body are overflowing vertically. Only the element that is overflowing will fire the scroll event, and in this case it is actually the element that matches the .box-wrapper selector.
Therefore if you listen to the scroll event on that element, then you should be able to retrieve its vertical scroll position using event.currentTarget.scrollTop:
document.querySelector(".box-wrapper").addEventListener("scroll", (e) => {
console.log(e.currentTarget.scrollTop);
});
See proof-of-concept example:
I am building a Angular 9 app.
In this app I got a scrollable div (overflow: auto).
I am looking for a way to check how many pixels the div has scrolled so I can use that distance to get an accurate distance for the scrollable element inside of it.
The code below only returns the distance from the side of the window but I need to add the pixels scrolled too to get accurate value.
ui.offset.left
You have to use the scrollTop or scrollLeft attribut:
element.scrollTop // The distance of the scroll
I have scenario where a check box will be enabled only when scroll section of div is fully scrolled.
Using above techniques and all the lookups I was able to scroll to last element of the div. But the problem is, there is some margin/padding which is left between last element and the scrolling div end section which is not making the checkbox to be enabled. If I give
WebElement element = driver.findElement(By.xpath("xpath"));
((JavascriptExecutor)
driver).executeScript("arguments[0].scrollIntoView(true);", element);
I am able to kind of focus on the scrolling div section, but not able to scroll.
Actions actions = new Actions(driver);
actions.moveToElement(element);
actions.perform();
Here, am able to move to last element of the div. but not end of scrolling div so, checkbox is still disabled.
js.executeScript("window.scrollBy(0,100);")
is scrolling the entire window which is expected. So, is there a way to explicitly scroll part of div?
Is there any tweaks that can be done in order to make the checkbox enabled?
First, Let's note some key ideas
key difference between scrollTo & scrollBy is that
scrollTo scrolls to a specific part of the website as you expect.
scrollBy scrolls to specific part FROM the current position.
You need to scrollTo not scrollBy, now let's scroll to the end of your div
Second important note is that the padding is considered a part of the element unlike margin, if you get an element's height, the padding is in that height
now get your element as a javascript object and assign it to a variable.
so Assign this
driver.executeScript("const myElem = document.getElementById('ELEMENT_ID'); return myElem")
to a WebElement object as this code will return your element, if it has no ID use any other JS method to get your element class or whatever.
we called it myElem so we can still refernce it with JS with that name, execute this on the driver
window.scrollTo(0, myElem.offsetTop + myElem.offsetHeight )
this scrolls to "your element's top coordinate" + "your element's height" which is just below it.
if the website was smart enough to detect that this scrolling was robotic, you can use
window.scrollTo({
top: myElem.offsetTop + myElem.offsetHeight,
left: 0,
behavior: 'smooth'
});
if there's still margin, get it the same way then add it to the top offset.
I have a long, scrollable list in an absolutely positioned container in the middle of my page (I do know how far the container is offset from the top of the screen, and the overflow is hidden on all the key elements). Each li in the list has a mouseover event. The events I see have a pageY in it, but that's the mouse position, and thus varies if I enter the li from above vs below. I need a constant value to position something alongside.
I looked in the srcElement property but the offsetTop within that is several 1000s, which means it is not based on the viewable content but the scrolled content.
How can I get a constant value of a scrolled div relative to the window as whole?
Note I canNOT easily run other DOM requests.
You can use the offsetTop you mentioned and substract the current scrollYOffset which you can get using window.pageYOffset.
var y = srcElement.offsetTop - window.pageYOffset;
I'm wondering if there is any easy way using jquery or javascript to read the current percent that the user is scrolled down a page, and then scroll the user up that percent?
The purpose of this would be:
Var scrollPercent = Read Scroll %
Resize div that effects vertical height of page
Scroll up ScrollPercent
You can use element.scrollTop which will give the vertical offset that has been scrolled.
If your scrolling the body then element can be the document.body otherwise the relative element
Use element.offsetHeight & compare with it if you need percentages.
Another avialable option is
window.scrollY
Once you have this scroll value you can use jquery animation to scroll up to the previous location