Position an element with javascript when css zoom is used on the page

Question

I have created a slideshow plugin that takes a list of images and builds a slide show. The slide show is positioned 100px from the top + $(document).scrollTop().

This is pretty simple and works very well. I am running into some issues when someone one has used css zoom on the page. The calculation for the top position will be off due to the zoom. Does anybody know a good way to correct this/ work around?

Thanks in advance!

Thanks. That might help. If anyone has input on my particular problem, that would be great. — Mike Bonds
– Mike Bonds, Commented Jan 24, 2013 at 20:17
What exactly do you mean by "css zoom"? Why would your calculation need to take care of that, if it just positions the element 100px from the top? — Bergi
– Bergi, Commented Jan 24, 2013 at 20:29
css has a zoom property... I am adding 100px to whatever is returned by $(document).scrollTop(). The issue is that that simple calculation is different depending on the zoom level. — Mike Bonds
– Mike Bonds, Commented Jan 24, 2013 at 20:36

Mladen Janjetovic · Accepted Answer · 2014-01-10 15:32:09Z

7

I had the same problem, and found out that jQuery .offset().top is returning some values which depend on window scroll position if there is CSS zoom added to element that is wrapping the elements we need to get position from.

So, I used the native JavaScript .offsetTop in this context:

$("#scrollDestination").get(i).offsetTop;

But, keep in mind that this will get the position relative to it's parent, not like jQuery .scrollTop() which is returning the scroll bar position. So you will need to do some calculations maybe, but at least you will get the consistent returning value for element's position, when you have CSS zoom involved.

answered Jan 10, 2014 at 15:32

Mladen Janjetovic

14.8k8 gold badges76 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kris Over a year ago

I appreciate this so much. Was so confused why my android gave different values for element.position. Found this : "dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition." api.jquery.com/position then found your post.

jfaron Over a year ago

what is the variable i, in .get(i) ?

Mladen Janjetovic Over a year ago

i is integer for the order number of the element in the DOM

Ricardo Garcia · Accepted Answer · 2023-08-17 23:46:48Z

0

this work me

const getScrollTop = function(){
    const zoom = 0.83; // Original zoom: 0.85  - In Js calculate use 0.83 (borders + padding + margin)
    let scroll = window.pageYOffset;
    scroll = (scroll + (scroll * (1 - zoom)));
    return scroll;
}

answered Aug 17, 2023 at 23:46

Ricardo Garcia

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Position an element with javascript when css zoom is used on the page

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related