最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin6浏览0评论

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!

Share Improve this question asked Jan 24, 2013 at 20:12 Mike BondsMike Bonds 1,04010 silver badges16 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

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;
}
发布评论

评论列表(0)

  1. 暂无评论