标签: infinite-scroll

我有一个名为home.html的html文档.我希望在观看者向下滚动或滚动条到达底部时加载一个新的html文档.

但是,我看到的所有教程对我来说似乎都太先进了.我是一名学生,也是javascript的新手.

所以,有没有人愿意指导我如何使用html和javascript创建一个超简单的无限滚动网页.我不知道php.

感谢您愿意提供的任何帮助.

我正在尝试使用 javascript 创建一个无限加载页面。我发现这个：How to doInfinite Scrolling with javascript only without jquery

我一直在玩链接到这个 jsfiddle 页面的最后一个答案：http://jsfiddle.net/8LpFR/

 document.addEventListener("scroll", function (event) {
      checkForNewDiv();
 });

 var checkForNewDiv = function () {
      var lastDiv = document.querySelector("#scroll-content > div:last-child");
      var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;
      var pageOffset = window.pageYOffset + window.innerHeight;

      if (pageOffset > lastDivOffset - 10) {
          var newDiv = document.createElement("div");
          newDiv.innerHTML = "my awesome new div";
          document.getElementById("scroll-content").appendChild(newDiv);
          checkForNewDiv();
      }
 }; 
 checkForNewDiv();

我该如何修改它才能使滚动在 div 内而不是整个页面上工作？例如，lastDivOffset 和 pageoffset 会更改为什么？

我正在使用 Django Rest Framework 创建一个 REST API。API 将提供大量数据，我想在页面上使用无限滚动。我想在前端使用 Angular。我不确定如何提供数据，以便并非所有数据都必须发送一次，而仅在用户向下滚动时发送。

我正在使用序列化程序类 -

class CompanySerializer(serializers.ModelSerializer):
    class Meta:
        model = Company
        fields = ('company_name', 'location', 'founded_year')

我不确定如何实现这一点。我应该使用 Django Endless Pagination 还是可以使用 django-rest-framework 提供的分页来完成。我也不确定它的前端将如何工作。Web 开发新手在这里，请帮助。

我正在寻找一种方法来实现在我的Firebase应用程序中滚动的简单列表视图,但我没有找到任何方法如何实现它.我已经在互联网上尝试了2-3个教程和文档,但没有达到要求的结果.

在我的应用程序中,我希望滚动像开始前10个列表项加载然后每次滚动接下来10或20项将加载,直到最后一项出现在列表的底部.

所以我尝试通过以下方式检索前10个项目:

ArrayList<Event> event=new ArrayList<>();

Dbref = FirebaseDatabase.getInstance().getReference("/event");
Dbref.startAt(1).limitToLast(10).addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            for (DataSnapshot snapshot : dataSnapshot.getChildren()) {
                Log.e("Events.java ", "range query started! : " + dataSnapshot.getChildrenCount());
                String event_id = snapshot.child("details").child("event_id").getValue().toString();
                e=new Event(event_id); //Event is a model class for list items
                event.add(e);
                Log.e("ShowEventInfo : ", "" + event_id);
            }
        }
        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });
    adapter=new Event_CustomAdapter(getActivity(),event); 
    ls.setAdapter(adapter); //here ls is instance of ListView

我推荐了这个Youtube视频来实现这个功能:(https://www.youtube.com/watch?annotation_id=annotation_3916642001&feature=iv&src_vid=YMJSBHAZsso&v=XwIKb_f0Y_w)

在上面的代码中,正如您所看到的,我正在生成Log以检查是否从firebase获取了数据,但是我没有输出Android监视器.

我不知道如何在列表视图中实现Firebase滚动.我认为对于那些在回收站视图/列表视图中实现无限滚动的人来说,这是一个常见问题.

你能帮我实现这个功能吗？谢谢.

我对无限滚动有疑问。每次加载更多数据时，它都会返回到顶部视图。我想要的是 RecyclerView 在加载新数据时保持在最后一个位置。\n我正在尝试实现此代码https://github.com/codepath/android_guides/wiki/Endless-Scrolling-with-AdapterViews-and-回收视图

这是无限滚动代码

public abstract class EndlessRecyclerViewScrollListener extends RecyclerView.OnScrollListener{\n// The minimum amount of items to have below your current scroll position\n// before loading more.\nprivate int visibleThreshold = 30;\n// The current offset index of data you have loaded\nprivate int currentPage = 0;\n// The total number of items in the dataset after the last load\nprivate int previousTotalItemCount = 0;\n// True if we are still waiting for the last set of data to load.\nprivate boolean loading = true;\n// Sets …

我正在尝试使用Firestore对数据进行分页（无限滚动我的表视图）。我已经尽我所能集成了google为分页提供的代码，但是我仍然无法正确加载数据。

初始数据集将根据需要加载到表视图中。然后，当用户点击屏幕底部时，将加载下一个“ x”项。但是，当用户第二次点击屏幕底部时，将相同的“ x”项简单地附加到表中视图。相同的项目会无限期地添加。

因此，其最初的3个“骑乘”对象，随后的4个“骑乘”对象将永远重复。

123 4567 4567 4567 4567 ...

如何正确加载数据？

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let offsetY = scrollView.contentOffset.y
    let contentHeight = scrollView.contentSize.height

    if offsetY > contentHeight - scrollView.frame.height {
        // Bottom of the screen is reached
        if !fetchingMore {
            beginBatchFetch()
        }
    }
}

func beginBatchFetch() {
    // Array containing "Ride" objcets is "rides"

    fetchingMore = true

    // Database reference to "rides" collection
    let ridesRef = db.collection("rides")

    let first = ridesRef.limit(to: 3)

    first.addSnapshotListener { (snapshot, err) in
        if …

这是我的第一个 Chrome 扩展程序。我正在构建一个扩展来替换页面上的文本。

提供的代码适用于加载 DOMContent 加载的任何内容。但是，在使用某种无限滚动的页面上，加载新内​​容时不会发生文本替换。

我需要它来对稍后添加到页面的任何内容运行文本替换。

我曾尝试使用 onscroll 事件侦听器，但这既笨拙又昂贵。我相信有更好的方法。

我已经研究过使用清单 run_at，但还没有找到使用它的方法。

let elements = document.getElementsByTagName('*');
let replacements = {
    "first to replace": "new text",
    "second to replace": "also new text"
};
let keys = Object.keys(replacements);

 RegExp.quote = (str) => {
     return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
 };

let makeItAwesomer = () => {
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];

        for (var j = 0; j < element.childNodes.length; j++) {
            let node = element.childNodes[j];

            if …

我正在尝试在具有固定高度的 div 中构建一个无限滚动，并附加一个滚动条，所以我的目标是让窗口不移动，而是让其中的组件具有滚动条，并且其中的项目可以无限添加。

这是我到目前为止所拥有的：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import InfiniteScroll from "react-infinite-scroll-component";

const style = {
  height: 18,
  border: "1px solid green",
  margin: 6,
  padding: 8
};

const DoseListCardBody = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchMoreData = () => {
    setItems(items.concat(Array.from({ length: 10 })));
  };

  return (
    <div style={{ height: "100%", overflowY: "scroll" }}>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={items.length < 200}
        loader={<h4>Loading...</h4>}
      >
        {items.map((i, index) => ( …

我正在使用Beautiful Soup从非英语网站中提取数据。现在我的代码只从关键字搜索中提取前十个结果。该网站旨在通过“更多”按钮访问其他结果（有点像无限滚动，但您必须继续点击更多才能获得下一组结果）。当我点击“更多”时，URL 不会改变，所以我不能每次都迭代不同的 URL。

我真的很想在两件事上得到一些帮助。

1. 修改下面的代码，以便我可以从所有页面获取数据，而不仅仅是前 10 个结果
2. 插入计时器功能，以便服务器不会阻止我

我正在添加“更多”按钮外观的照片，因为它不是英文的。它在页面末尾以蓝色文本显示。

import requests, csv, os
from bs4 import BeautifulSoup
from time import strftime, sleep

# make a GET request (requests.get("URL")) and store the response in a response object (req)
responsePA = requests.get('https://www.prothomalo.com/search?q=%E0%A6%A7%E0%A6%B0%E0%A7%8D%E0%A6%B7%E0%A6%A3')

# read the content of the server’s response
rawPagePA = responsePA.text

soupPA = BeautifulSoup(rawPagePA)
# take a look
print (soupPA.prettify())

urlsPA = [] #creating empty list to store URLs
for item in soupPA.find_all("div", …

我正在尝试使用React Hooks设置无限滚动，我从节点后端正确获取数据（每个请求 3 个数据集），并且当我滚动时，新数据也会正确添加到数组中（在 returnedPlaces 状态下），但是页面在重新渲染时返回顶部，我需要防止这种行为。我该如何防止这种情况，下面是我的代码

import React, { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [page, setPage] = useState(1);
  const [loadedPlaces, setLoadedPlaces] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const getPlaces = async () => {
      try {
        setIsLoading(true);
        const url = `http://localhost:5000/api/places/user/${id}?page=${page}&size=3`;
        const responseData = await fetch(url);
        const data = await responseData.json();
        console.log(data);
        setLoadedPlaces((prev) => [...prev, ...data.places]);
        setIsLoading(false);
      } catch (error) {}
    };
    getPlaces();
  }, [page]); …