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;
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 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.
Hope this isn't a duplicate question as I've been searching for some time for this issue and haven't found a clean solution yet. Maybe I'm just not searching correctly.
I have a navbar which has its position set to fixed trough javascript when it reaches the top of the viewport. I'm using jquery 1.11.3 to get offset().top of the element, however this value doesn't seem to update itself when the vertical height of the viewport changes.
For example, on an Android tablet with Chrome the address bar disappears, the 'resize' event is triggered but the offset().top of the element remains the same causing my navbar to remain static although it was scrolled past the top of the viewport and should be now fixed. I have also used a timeout to read the new value on resize but to no avail.
Is there some way to ask jquery to reconsider the viewport size so that I don't update my internal offset based on the new values? Or maybe this isn't the way to go?
I encounter the same problem as you. On window resize, my element offset value was not change. In my case, my element was in fixed position. Maybe yours too? But if I scroll the page, the element offset changed. So In my case, I just put a fixed offset value to be use for my element.
Try implement this code in your window resize event
elementTop = $('#element').offset().top;
windowTop = $(window).scrollTop();
if( elementTop - windowTop < 0) {
// write your set fixed position code here
}
I have a "box" popup that appears on mouseover for some links. The box is about 300px tall and the top side of the box is on the same level as the link position, however some of these links are at the lowest scrollable part of the page, thus the popup will be cut off.
Question
What values are used to detect the bottom of the page, or remaining scrollable distance to the bottom so that you can shift the popup as required?
I'm using jQuery, but a generic JavaScript solution is also welcome for reference.
Thank you.
Basically you want to find the bottom of the viewport relative to the document, and then compare them to the coordinates of the incoming event.
function handler(event) {
var bottomOfViewport = $(window).scrollTop() + $(window).height();
var bottomOfBox = event.pageY + HEIGHT_OF_BOX;
if ( bottomOfViewport < bottomOfBox )
// code to handle overflow condition
}
Thankfully, the pageX and pageY properties are relative to the document. Similar holds for the x-axis.
In JS, how can I get the mouse coordinates inside a DIV? if I use event.pageX, it will only work if the DIV is at the top left corner of the page... otherwise, I have to know the position of the DIV in the page and subtract event.pageX from that. This is hard to do when I generate the DIVs dynamically since I have to keep track of the position of each DIV. Any ideas?
It seems like event.layerX and event.layerY works find in FF if I define the DIV with an absolute position. Here is a short example:
http://www.zangware.com/divpos.html
But in IE, event.layerX/Y is undefined inside the DIV. Any ideas?
It sounds to me like you answered your own question. I'm not aware of any shortcuts for finding the cursor position from within a div simpler than subtracting the x and y coordinates of the mouse from the x and y coordinates of the upper left corner of the div. Just make sure you cache the location of the div as it changes to avoid a DOM lookup each time the mouse cursor moves.
It's not too hard. Each element has an offsetTop and offsetLeft property. You can use that with current mouse position to figure out the relative position.