jQuery position problem with Chrome

2019-01-22 19:13发布

站内问答 / jQuery
1837 8 4

When I alert the value .position().left, it returns 0 on Chrome. With other browsers it returns the actual number. Why does this happen?

8条回答
虎瘦雄心在
2楼-- · 2019-01-22 19:53

For me it worked by placing the javascript code in a document ready just before the closing of the body tag

That way it executes the code after it has loaded everything

    <body>
        <div>content</div>
        <div class='footer'>footer</div>
        .
        .
        .

        <script type='text/javascript>
            $(document).ready(function(){
              var footer_position = $(".footer").offset().top;
              console.log(footer_position);
            });
        </script>
     </body>
查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
3楼-- · 2019-01-22 19:58

Webkit based browsers (like Chrome and Safari) can access images width and height properties only after images have been fully loaded. Other browsers can access this information as soon as just the DOM is loaded (they don't need to load the images entirely to know their size).

So, if you have images in your page, with Webkit based browsers you should access offset information after the $(window).load event fires, and not after the $(document).ready event.

查看更多
0人赞 添加讨论(0) 举报
冷血范
4楼-- · 2019-01-22 19:58

By reading comments from http://api.jquery.com/position/, there are several ways to fix this. The one I found working is

Ajaho [Moderator] :This plugin function fixes problems with wrong position in Chrome

jQuery.fn.aPosition = function() {
    thisLeft = this.offset().left;
    thisTop = this.offset().top;
    thisParent = this.parent();

    parentLeft = thisParent.offset().left;
    parentTop = thisParent.offset().top;

    return {
        left: thisLeft-parentLeft,
        top: thisTop-parentTop
    };
};
查看更多
0人赞 添加讨论(0) 举报
▲ chillily
5楼-- · 2019-01-22 20:00

I had the same problem..

I fixed it using: .offset().left instead. But be aware that are not the same: http://api.jquery.com/offset/

.position().left worked in Chrome in some tests I did, using a similar approach than David (the value was available since the first try).

In my "real" application failed even reading the position on click event (which may eliminate any loading speed problem). Some comments (in other forum) say it may be related to the use of display:inline-block. However I couldn't reproduce the problem using inline-block. So it may be other thing.

查看更多
0人赞 添加讨论(0) 举报
叛逆
6楼-- · 2019-01-22 20:03

Webkit can be too fast sometimes, but it's often taken care of in jQuery. You can debug using something like:

var v, elem = $('.myElement');
window.setTimeout(function() {
    v = elem.position().left;
    console.log(v);
    if (v) {
        return false;
    }
    window.setTimeout(arguments.callee, 1);
}, 1);

This will check if and when the position is available. If you are logging "0" in infinity, the position().left is "never" available and you need to debug elsewhere.

查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
7楼-- · 2019-01-22 20:10

I use this function to correct it.

function getElementPosition(id) {
          var offsetTrail = document.getElementById(id);
          var offsetBottom = 0;
          var offsetTop = 0;
          while (offsetTrail) {
              offsetBottom += offsetTrail.offsetBottom;
              offsetTop += offsetTrail.offsetTop;
              offsetTrail = offsetTrail.offsetParent;
          }

          return {
              bottom: offsetBottom,
              toppos: offsetTop
          };
      }
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)