Question

我对网页设计很陌生，我想制作一个矩形，上面写着＆＃34; true＆＃34;如果用户已滚动，则转向＆＃34; false＆＃34;一秒过了之后。

＆＃13;

var hasScroll = false;
$(document).ready(function() {
  $(window).scroll(function() {
    hasScroll = true;
    $("#rectangle").html(hasScroll.toString());
    setTimeout(function() {
      hasScroll = false;
    }, 1000);
  });
});

＆＃13;

body { height: 800px }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rectangle"></div>

＆＃13;

然而，即使变量＆＃34; hasScroll＆＃34;改变了我想要的方式，我似乎无法找到一种方法让div实时显示hasScroll状态。

Answer 1

滚动完成后，您需要再次设置#rectangle的文本。你也可能想要设置/清除setTimeout仅在1000ms内没有触发滚动事件时运行：{/ p>

＆＃13;

let scrollingTimeout;
const rectangle = document.querySelector('#rectangle');
$(window).scroll(function() {
  if (scrollingTimeout) clearTimeout(scrollingTimeout);
  else rectangle.textContent = 'true';
  scrollingTimeout = setTimeout(function() {
    console.log('setting text to false');
    rectangle.textContent = 'false';
    scrollingTimeout = null;
  }, 1000);
});

＆＃13;

body {
  height: 800px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rectangle">abc</div>

＆＃13;

Answer 2

这非常简单，只需在设置$("#rectangle").html(hasScroll.toString());

之后设置相同的行hasScroll = false;

例如，

var hasScroll = false;
    $(document).ready(function() {
      $(window).scroll(function() {
        hasScroll = true;
        $("#rectangle").html(hasScroll.toString());
        setTimeout(function() {
          hasScroll = false;
          $("#rectangle").html(hasScroll.toString()); // To show false
        }, 1000);
      });
    });

使用jQuery实时更新div内容

2 个答案: