我使用下面的脚本加载滚动到页面底部的数据,它在所有浏览器中工作正常。但如果我使用键盘快捷键Ctr+或Ctrl-(〉或〈默认缩放)手动放大/缩小窗口,它似乎在chrome中不工作。
Ctr+
Ctrl-
if (($(window).scrollTop() + $(window).innerHeight()) >= $(document).height()){ loadData(); }
qq24tv8q1#
这似乎是chrome中的一个错误,我已经报告了这个**here>>**甚至,我使它的工作应用一个小的高度减少(-100),以满足条件前不久,它到达滚动结束。代码是这样的
if (($(window).scrollTop() + $(window).innerHeight()) >= $(document).height()-100){ loadData(); }
编辑
Chrome开发人员在上面链接的bug中给出了以下建议。
$(window).scrollTop() + $(window).height() >= $(document).height()
ppcbkaq52#
Math.ceil()为我工作;)
Math.ceil()
methods: { onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) { if ( (scrollTop > 0 ) && (**Math.ceil**(scrollTop + clientHeight) >= scrollHeight) ) { // your code here } } }
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);
5ktev3wc4#
我认为detectZoom js会帮助你这里是js的链接https://github.com/tombigel/detect-zoom/blob/master/detect-zoom.js
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(); }
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
6条答案
按热度按时间qq24tv8q1#
这似乎是chrome中的一个错误,我已经报告了这个**here>>**
甚至,我使它的工作应用一个小的高度减少(-100),以满足条件前不久,它到达滚动结束。
代码是这样的
编辑
Chrome开发人员在上面链接的bug中给出了以下建议。
ppcbkaq52#
Math.ceil()
为我工作;)myss37ts3#
我在实现userJS扩展backTopUserJS时遇到了同样的问题
你可以使用这段代码在Firefox,Chrome和IE浏览器:
5ktev3wc4#
我认为detectZoom js会帮助你这里是js的链接
https://github.com/tombigel/detect-zoom/blob/master/detect-zoom.js
wnrlj8wa5#
当浏览器调整大小时,滚动条宽度将动态更改。由于此条件($(window).scrollTop()+ $(window).innerHeight())〉= $(document).height())将永远不会返回True。
要解决上述问题,请按照以下步骤操作。
1.确定滚动条宽度。
2.然后使用下面的代码检查滚动是否到达底部。
zmeyuzjn6#
我想这与这样一个事实有关:
scrollTop是一个非舍入的数字
Mdn Web Docs建议使用如下表达式:
我想在这种情况下,表达方式可能更像这样:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled