Я пытаюсь реализовать бесконечную прокрутку HTML, в которой в любой момент времени в списке есть только несколько элементов div (чтобы уменьшить объем памяти).

Я добавляю новый элемент div в список, и в то же время я удаляю первый элемент, поэтому общее количество элементов div остается неизменным.

К сожалению, область просмотра не остается на месте, но вместо этого она немного подпрыгивает назад (на самом деле высота удаленного элемента div). Есть ли способ сохранить окно просмотра при удалении div из списка?

Я сделал небольшую автономную HTML-страницу (ну, ей все еще нужен JQuery 3.4.1), которая выявляет проблему: она начинается с добавления 5 делений, а затем продолжает добавлять новую и удалять первую каждую 1 секунду

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function removeit() {
  // remove first one
  var tiles = $(".tile");
  $(tiles[0]).remove();
}

function addit() {
  // append new one
  var jqueryTextElem = $('<div class="tile" style="height:100px;background-color:' + getRandomColor() + '"></div>');
  $("#inner-wrap").append(jqueryTextElem);
}

function loop() {
  removeit();

  addit();

  window.setTimeout(loop, 1000);
}

addit();
addit();
addit();
addit();
addit();

loop();
<div id="inner-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2
Gianluca Ghettini 30 Май 2019 в 15:40

2 ответа

Лучший ответ

Вы можете временно добавить position: fixed к родительскому элементу:

  1. сначала добавьте position: fixed к родителю;
  2. затем удалите предмет;
  3. затем удалите position: fixed из родительского
2
Rounin 30 Май 2019 в 13:00

У меня такое ощущение, что вы пытаетесь съесть свой торт и съесть его, потому что если вы делаете окно просмотра «неподвижным», я думаю, вы имеете в виду, что вы не хотите, чтобы пользователь видел перемещение полосы прокрутки, а затем также У вас нет новых возможностей прокручивать дальше вниз по странице, потому что вы хотите, чтобы бегунок / бегунок полосы прокрутки оставался в нижней части дорожки полосы прокрутки?

Я имею в виду, что вы можете просто использовать $(window).scrollTop($(window).scrollTop() + 100); в своем примере, чтобы сделать так, чтобы положение прокрутки окна просмотра не перемещалось визуально при удалении элементов, но в этот момент вы не будете держать представление пользователей о текущие элементы такие же или даже позволяют пользователю иметь новый контент дальше вниз по странице для прокрутки в сторону. Вы бы просто «подталкивали» контент через взгляд пользователя?

Если вы пытаетесь облегчить загрузку того, что в данный момент анализируется в документе, потому что вы выполняете некоторую тяжелую работу с объектом документа во время выполнения, возможно, вы все еще хотите удалить более ранние элементы, но сохраните их геометрию с помощью некоторого пустого элемента часового, который всегда имеет высота всех ранее удаленных элементов, добавленных к нему? Это позволило бы вам иметь несколько меньшую занимаемую площадь (хотя и не в плане компоновки), но при этом иметь пригодную для использования полосу прокрутки, которая может общаться с пользователем, и обе позволяют пользователю прокручивать вниз, к контенту, который был добавлен.

В общем, я думаю, что в настоящее время у вас есть то, как большинство бесконечных скроллеров работают и должны работать, то есть положение прокрутки и полоса прокрутки должны изменяться при добавлении контента в направлении, в котором пользователь прокручивает, это сообщает им, что они могут на самом деле продолжать прокручивать таким образом. Вы действительно не должны хотеть, чтобы положение прокрутки окон просмотра было "неподвижно".

Чтобы понять, почему я не думаю, что у вас есть настоящая проблема, замените ваше loop() определение на что-то вроде этого ...

function loop() {
  $(window).scroll(function() {
    // check for reaching bottom of scroller
    if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
      addit();
      removeit();
    }
  })
}
0
jonjohnjohnson 24 Июн 2019 в 07:15
56378527