Window 调整大小和滚动

Question

我创建了一个搜索系统，当仅在小尺寸屏幕上单击输入框时，屏幕会向下滚动，以便更多地关注输入框。即使我将屏幕大小调整为超出参数范围，滚动仍会继续工作。反之亦然（如果屏幕开始变大则不起作用）。调整屏幕大小时如何进行这项工作。

这是我目前的代码：

if (window.innerWidth < 700) {
    $(".sl-mobile").click(function () {
        $('html, body').animate({
            scrollTop: $(".search-subheading").offset().top
        }, 2000);
    })
}else{

}

Answer 1

如果 window 小于 700，您的代码将在脚本加载时绑定一次点击事件。您应该改为检查点击事件中的 window 宽度，如下所示：

$(".sl-mobile").click(function () {
  if (window.innerWidth < 700) {
    $('html, body').animate({
        scrollTop: $(".search-subheading").offset().top
    }, 2000);
  }
})

Window 调整大小和滚动

Window resizing and scroll

javascript

jquery

scroll

resize