How to use javascript to achieve scroll loading, the mouse can automatically scroll to the bottom to-CodePudding

I want to realize that when scrolling to the bottom of the window, more information can be loaded in, so far it has been done! But I have two problems: 1. I don't know how to make the scroll scroll to the bottom to see the newly loaded data when the data is loaded? 2. Since I will trigger a loading function when I scroll to the bottom, if it will automatically scroll to the bottom when the data is loaded, this will not trigger the loading function. What I want is to only load each time I scroll Enter four data. I have tried many ways and still don't know how to solve the above two problems I encountered, I hope to get your help, thank you very much.

let str = ""
let limit = 4;
let offset = 0;

let data = [{
    id: 5,
    title: "title5"
  },
  {
    id: 6,
    title: "title6"
  },
  {
    id: 7,
    title: "title7"
  },
  {
    id: 8,
    title: "title8"
  },
  {
    id: 9,
    title: "title9"
  },
  {
    id: 10,
    title: "title10"
  },
  {
    id: 11,
    title: "title11"
  },
  {
    id: 12,
    title: "title12"
  },
  {
    id: 13,
    title: "title13"
  },
  {
    id: 14,
    title: "title14"
  },
  {
    id: 15,
    title: "title15"
  }
];

function addData() {
  let newData = data.splice(0, limit);
  if (newData.length === 0) return;

  str = "";
  newData.forEach(e => {
    str  = `  <li >
      <div class='id'>${e.id}</div>
      <div>${e.title}</div>
    </li>`
  });
  content.innerHTML  = str;
}

let loading = false;
let content = document.querySelector('.content');
content.addEventListener('scroll', function() {
  if (loading || data.length === 0) return;

  if (content.scrollTop   content.clientHeight >= content.scrollHeight) {
    loading = true;
    document.querySelector('.loading').style.display = 'block';
    setTimeout(() => {
      addData();
      document.querySelector('.loading').style.display = 'none';
      loading = false;
    }, 1000);
  }
});

.content {
  width: 600px;
  height: 200px;
  overflow: auto;
  border: 1px solid;
}

.message {
  display: flex;
  padding: 30px;
  border: 1px solid #ddd;
}

.id {
  margin-right: 8px;
}

.loading {
  display: none;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  background: url('https://media.giphy.com/media/3o7bu3XilJ5BOiSGic/giphy.gif');
}

<ul >
  <li >
    <div class='id'>1</div>
    <div>title1</div>
  </li>
  <li >
    <div class='id'>2</div>
    <div>title2</div>
  </li>
  <li >
    <div class='id'>3</div>
    <div>title3</div>
  </li>
  <li >
    <div class='id'>4</div>
    <div>title4</div>
  </li>
  <div ></div>
</ul>

CodePudding user response：

Here's how you can solve them:

Solution for the first problem: To automatically scroll to the bottom of the window, you can use JavaScript's window.scrollTo() method. In your loading function, after the data is loaded. Example:

function scrollWin() {
   window.scrollTo(0, document.body.scrollHeight)
 }

Example with animation:

var scrollDiv = document.getElementById("content").scrollHeight;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

Solution for the second problem: To limit the number of data loaded per scroll event, you can use a counter. In your loading function, increment the counter each time it's called, and only perform the load if the counter is less than 4. Once the counter reaches 4, reset it to 0.