jquery - Position an element with javascript when css zoom is used on the page - Stack Overflow

admin管理员组

文章数量:1326631

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!

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!

• javascript
• jquery
• css

Share Improve this question Follow asked Jan 24, 2013 at 20:12 Mike BondsMike Bonds 1,0401010 silver badges1616 bronze badges 5

• 1 possible duplicate of Jquery draggable with zoom problem – John Koerner Commented Jan 24, 2013 at 20:15
• Thanks. That might help. If anyone has input on my particular problem, that would be great. – Mike Bonds Commented Jan 24, 2013 at 20:17
• 1 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 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 Commented Jan 24, 2013 at 20:36
• 2 how do you fixed the issue? – alphanyx Commented Apr 15, 2013 at 10:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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;
}

本文标签： jqueryPosition an element with javascript when css zoom is used on the pageStack Overflow