主页 / 问题 / 1276423
Accepted
hibinyru
Asked:2022-04-29 20:58:13 +0000 UTC2022-04-29 20:58:13 +0000 UTC

当浏览器屏幕上出现一个 div 块（有几个）时，调用 ajax

  • 772

主啊，欢迎。

给定：页面上有几个表单块<div id="idXXX"></div>

任务：滚动页面时，如果块在用户可见的浏览器屏幕部分 - 调用 ajax 脚本（标记为已读）

我正在尝试用jquery解决这个问题，我赢不了:(我很乐意提供帮助，在此先感谢。

理想情况下，不会再次调用相同的函数，即 这样它对每个块都有效一次

大纲：

 function inWindow(s)
    {
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var currentEls = $(s);
    var ids=s;
    var offset = currentEls.offset();
    if(scrollTop <= offset.top && (currentEls.height() + offset.top) < (scrollTop + windowHeight))
      {
      /*
      $.ajax({
           url:  "status.php?admin='.$admin.'&id=" + ids + ""  // не работает, не вставляет ids
          });
      */
      console.log("Блок "+ids+" в области видимости");
      }
    }

  $(document).scroll(function ()
    {
    inWindow("#id1")
    });
  $(document).scroll(function ()
    {
    inWindow("#id2")
    });
  $(document).scroll(function ()
    {
    inWindow("#id3")
    });
  $(document).scroll(function ()
    {
    inWindow("#id4")
    });
  $(document).scroll(function ()
    {
    inWindow("#id5")
    });
  
.active
  {
  height:300px;
  background-color:red;
  margin:10px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="id1" class="active"></div>

<div id="id2" class="active"></div>

<div id="id3" class="active"></div>

<div id="id4" class="active"></div>

<div id="id5" class="active"></div>

jquery

1 个回答

  1. Best Answer

    代码注释中的解释

    let of = $(window).height() / 2, // Отступ, в данным случае считает от центра экрана
    el = $('.active'), // Какие блоки учитывать
    cur = false; // Тут храним блок в скролле, чтобы срабатывало один раз

$(window).on('scroll', function() { // при скролле..
  let sY = $(this).scrollTop(); // получаем текущею позицию скролла
  el.each(function() { // проходим по ВСЕМ блокам которые нужно учитывать
    let el = $(this); // запоминаем его, чтобы не обращаться к нему
    
    // Тут проверяем, входил ли позиция скролла - отступ в границу блока.
    if(el.position().top - of <= sY
    && el.position().top + el.outerHeight() - of > sY) { // если да, то
      if(cur !== el.attr('id')) { // проверяем является ли этот блок тем, что был ранее в записи, если нет, то
        cur = el.attr('id'); // Сохраняем его (НЕ УДАЛЯТЬ)
        el.css('background', 'green'); // Для демо, мы показываем его зелёным
        console.info(el.attr('id')); // И выводим его ID в консоль.
        // Вместо кода выше, нужно оказать ваш AJAX запрос.
      }
    } else { // Если скролл не на границе
      if(cur === el.attr('id')) { // Проверим является ли он тем, что в записи
        el.css('background', ''); // удалим у него фон
        console.info('ушли с '+cur); // покажем что мы с него ушли
        // Тут может быть какое-то обратное действие, допустим снять класс с объекта который покинул область видимости.
      }
    }
  });
});
    .as-console-wrapper {max-height: 42px !important;} /* для демо */

.active {
  height: 300px;
  background-color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div id="id1" class="active"></div>
<div id="id2" class="active"></div>
<div id="id3" class="active"></div>
<div id="id4" class="active"></div>
<div id="id5" class="active"></div>

    我建议.active块之间根本没有缩进。

    • 4

相关问题