Question

我正在尝试相对于其目标动态定位弹出窗口。它适用于桌面浏览器。但在移动浏览器中，这些职位都是错误的。这主要是因为在桌面浏览器中，即使页面滚动，元素的offset（）也会给出相同的值。但在移动浏览器中，offset（）在滚动页面时提供不同的值。要获得实际的偏移量，我们需要这样做，

offset.left -= window.pageXOffset
offset.top -= window.pageYOffset

但在所有情况下都不会发生这种情况。仅当页面未在移动浏览器中缩放时才会发生这种情况。此处报告此问题（https://github.com/jquery/jquery/issues/3187）。
在本期问题页面中，他们提到只有在缩放移动浏览器时才会出现此问题。

如何找到正确的偏移量而不管桌面/移动/ ipad浏览器？

我已经得到了一个解决方案来获取元素的实际偏移量：

function getOffset( element ){
  var $body = $('body');
  var offset = element.offset();
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      var temp = $('<span>').css({
        position:'absolute',
        height:'20px',
        width:'20px',
        top:'0px',
        left:'0px'
      }).appendTo( $body );
      correctionOffset = temp.offset();
      correctionOffset.left = correctionOffset.left - parseFloat( $body.css('margin-left') ) - parseFloat( $body.css('border-left-width') ) ; 
      correctionOffset.top = correctionOffset.top - parseFloat( $body.css('margin-top') ) - parseFloat($body.css('border-top-width') ) ; 
      temp.remove();
      offset.left -= ( correctionOffset.left );
      offset.top -= ( correctionOffset.top );
  }
  return offset;
}

这是否是在移动浏览器中实现元素正确偏移的正确方法，即使它已缩放？

Answer 1

您可以尝试使用它：

<li><a href="#scroll_to_gallery" class="bnrbuttons"></a></li>


 <script>
 jQuery(document).on('click', '.bnrbuttons a', function(event){
    event.preventDefault();

    if ( $(window).width() < 767) { //Set here window width accourding to your need

        jQuery('html, body').animate({
        scrollTop: jQuery( jQuery.attr(this, 'href') ).offset().top + 230
        }, 500);
        
    }
  else{
      jQuery('html, body').animate({
        scrollTop: jQuery( jQuery.attr(this, 'href') ).offset().top - 65
        }, 500);
  }
        
});

offset（）在移动浏览器中返回不同的值

1 个答案: