jquery 如果窗口在chrome中放大/缩小,则不执行滚动事件的代码

4uqofj5v  于 2022-12-18  发布在  jQuery
关注(0)|答案(6)|浏览(293)

我使用下面的脚本加载滚动到页面底部的数据,它在所有浏览器中工作正常。但如果我使用键盘快捷键Ctr+Ctrl-(〉或〈默认缩放)手动放大/缩小窗口,它似乎在chrome中不工作。

if (($(window).scrollTop() + $(window).innerHeight()) >= $(document).height()){ 
    loadData();
 }
qq24tv8q

qq24tv8q1#

这似乎是chrome中的一个错误,我已经报告了这个**here>>**
甚至,我使它的工作应用一个小的高度减少(-100),以满足条件前不久,它到达滚动结束。
代码是这样的

if (($(window).scrollTop() + $(window).innerHeight()) >= $(document).height()-100){ 
    loadData();
 }

编辑

Chrome开发人员在上面链接的bug中给出了以下建议。

$(window).scrollTop() + $(window).height() >= $(document).height()
  • 我这边还没测试过。
ppcbkaq5

ppcbkaq52#

Math.ceil()为我工作;)

methods: {    
    onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
      if ( (scrollTop > 0 ) && (**Math.ceil**(scrollTop + clientHeight) >= scrollHeight) ) {        
        // your code here
      }
    }
}
myss37ts

myss37ts3#

我在实现userJS扩展backTopUserJS时遇到了同样的问题
你可以使用这段代码在Firefox,Chrome和IE浏览器:

function main() {
    var disp = $(window).scrollTop() > 400 ? 'block' : 'none';
    var $upButton = $('<div class="up-button" title="Up" style="display:' + disp + '">UP</div>');

    $(document).find('body').append($upButton);
    $upButton.click(function () {
        $('html, body').animate({ scrollTop: 0 }, 'slow');
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() > 400) $upButton.fadeIn('slow');
        else $upButton.fadeOut('slow');
    });
};

var script = document.createElement('script');
script.appendChild(document.createTextNode('('+ main +')();'));
(document.body || document.head || document.documentElement).appendChild(script);
wnrlj8wa

wnrlj8wa5#

当浏览器调整大小时,滚动条宽度将动态更改。由于此条件($(window).scrollTop()+ $(window).innerHeight())〉= $(document).height())将永远不会返回True。
要解决上述问题,请按照以下步骤操作。
1.确定滚动条宽度。

function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

document.body.appendChild(outer);

var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";

// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);        

var widthWithScroll = inner.offsetWidth;

// remove divs
outer.parentNode.removeChild(outer);

return widthNoScroll - widthWithScroll;
}

2.然后使用下面的代码检查滚动是否到达底部。

if (($(window).scrollTop() + $(window).innerHeight()) >= $(document).height()-getScrollbarWidth()){ 
   loadData();
}
zmeyuzjn

zmeyuzjn6#

我想这与这样一个事实有关:
scrollTop是一个非舍入的数字
Mdn Web Docs建议使用如下表达式:

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1

我想在这种情况下,表达方式可能更像这样:

if (Math.abs($(window).scrollHeight - $(window).clientHeight - $(window).scrollTop) < 1) { 
     loadData();
}

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled

相关问题