Question

我想为移动用户制作一个自动滚动功能，因此他们不再有键盘问题，因为它们有时会重叠输入。
- ＆gt;如果有人点击输入页面，由于固定导航，页面向下滚动到-64px。

我的问题是，例如，如果平板电脑用户将视图从横向更改为肖像，则该功能无法正常工作，因为我设置了：

if ($( window ).width() <= 1250) {});

所以我做了一个这样的调用函数：

$(window).resize(function() {
    resizeFix();
});

但问题是在改变窗宽后它会无限循环。

整个代码：

$(document).ready(function(){ 
    resizeFix = function() {
            if ($( window ).width() <= 1250) {
            $('input[type=text], input[type=checkbox], input[type=password], textarea').focus(function() {
                    $('html, body').animate({
                        scrollTop: $('input:focus, textarea:focus').offset().top - 64
                    }, 500);
                });
            };

    };

  resizeFix();

    $(window).resize(function() {
        resizeFix();
    });
});

编辑：我已经尝试过：

$(window).resize(function() {
  if ($( window ).width() <= 1250) {
    resizeFix();
 });
});

Answer 1

这是因为在每个resize事件上，您为每个元素附加一个新的事件侦听器以进行焦点调整。你只想要一个。因此，例如，用布尔值跟踪它。（您实际正在做的是跟踪功能resizeFix是否已经被触发。）为了确保在重新缩放到＆gt;时，侦听器不会再次触发。 1250，您可以拨打off()。

$(document).ready(function() {
  var listenerAttached = false;
  var resizeFix = function() {
    var w = $(window).width();
    if (!listenerAttached && w <= 1250) {
      $('input[type=text], input[type=checkbox], input[type=password], textarea').on("focus", function() {
        $('html, body').animate({
          scrollTop: $('input:focus, textarea:focus').offset().top - 64
        }, 500);
      });
      listenerAttached = true;
    } else if (listenerAttached && w > 1250) {
      $('input[type=text], input[type=checkbox], input[type=password], textarea').off("focus");
      listenerAttached = false;
    }
  };

  resizeFix();

  $(window).resize(function() {
    resizeFix();
  });
});

无限循环使用jquery和$（window）.resize函数

1 个答案: