Question

我有一个代码，当我向下滚动时，它应该触发各种功能（每个功能在另一个下方绘制一个图表）。关键是该代码在我的屏幕上可以正常工作，但是当我在更大的屏幕上运行它时，不会触发功能。

我什么都没编码，我调试并测试了每个条件，都抛出了true。

这是麻烦的代码段：

$(window).scroll(function() {

  if ($('#chartdiv').html().length != 0) {

    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if (Math.round((scrollHeight - scrollPosition) / scrollHeight) === 0) {


      if ($('#chartdiv2').html().length == 0) {
        drawChar2();
      }
      okas.
      else if ($('#chartdiv3').html().length == 0) {
        drawChar3();
      } else if ($('#chartdiv4').html().length == 0) {
        drawChar4();
      } else if ($('#chartdiv5').html().length == 0) {
        drawChar5();
      }
    }
  }

});

Answer 1

如果屏幕很大，则必须添加if条件。因为没有理由滚动。

$(window).scroll(function() {
    if ($('#chartdiv').html().length != 0) {
        var $window = $(window);
        var windowHeight = $window.height();
        var scrollHeight = $(document).height();
        var scrollPosition = windowHeight + $window.scrollTop();
        if (windowHeight === scrollHeight || // add this condition!!!
            Math.round((scrollHeight - scrollPosition) / scrollHeight) === 0) {

            if ($('#chartdiv2').html().length == 0) {
                drawChar2();
            } else if ($('#chartdiv3').html().length == 0) {
                drawChar3();
            } else if ($('#chartdiv4').html().length == 0) {
                drawChar4();
            } else if ($('#chartdiv5').html().length == 0) {
                drawChar5();
            }
        }
    }
});

滚动未触发功能

1 个答案: