七爪源码：如何使用 Intersection Obs

七爪源码：如何使用 Intersection Observer API 实现无限滚动

用 Intersection Observer API 实现更简单、性能更好的无限滚动

介绍

当我们的列表页面有很多数据，比如200条，但是因为请求速度很慢，我们不能一次请求所有的数据，就会导致体验很差。一般我们会对数据进行分页，每个分页可能包含10个条目。我们只会加载前 10 个项目，当需要浏览更多项目时，将加载接下来的 10 个项目。

在移动页面上，无限滚动是一种非常常见的分页方式。因为传统的分页模式，更多的数据只有在用户点击之后才会加载。无限滚动允许用户在滚动到页面底部时自动加载更多内容，无需任何额外操作，体验更好。

如何实施

我们将分两步实现无限滚动：

使用 JavaScript 生成列表。
使用 Intersection Observer API 加载更多内容。

使用 JavaScript 生成列表

首先，我们生成一个空白列表页面，然后通过 JavaScript 的 setTimeout 模拟请求来加载数据，最后将数据渲染到页面中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List</title>
</head>
<body>
  <ol class="list"></ol>
  <style>
    li {
      background-color: rgba(70,87,255,.08);
      width: 100%;
      margin-bottom: 20px;
      padding: 20px 0;
      cursor: pointer;
    }
    li:hover {
      background-color: rgba(70,87,255,.2);
    }
  </style>
  <script>
    const $list=document.querySelector('.list');
    // Simulate a request to load data and render it to the list element;
    function loadItems(number) {
      new Promise((resolve)=> {
        setTimeout(()=> {
          resolve(Array(number).fill('A List Item'));
        }, 1000);
      }).then(data=> {
        const html=data.map(item=> `<li>${item}</li>`);
        $list.innerHTML +=html.join('');
      })
    }
    loadItems(10);
  </script>
</body>
</html>

使用 Intersection Observer API 加载更多

Intersection Observer API 可以观察一个元素是否可见，所以在使用它完成无限滚动时，需要在列表底部添加一个元素。当元素可见时，加载更多内容。

在 ol 旁边添加一个 div 元素：

<ol class="list"></ol>
<div class="more">loading</div>

然后使用 Intersection Observer API 观察元素，当元素可见时加载 next10 项：

const intersectionObserver=new IntersectionObserver(entries=> {
  if (entries[0].intersectionRatio <=0) return;
  // load more content;
  loadItems(10);
});
// start observing
intersectionObserver.observe(document.querySelector(".more"));

使用 Intersection Observer API 进行无限滚动就是这么简单。但是，在这个实现中会有一个小的经验问题。只有当用户看到 loading... 元素时，才会加载数据。如果在用户从页面底部滚动一点时加载数据，那将是完美的。

我们可以通过添加一个占位符元素来优化它，使观察者提前执行。

<ol class="list"></ol>
<div class="more">
  <p class="virtual"></p>  // and a placeholder element
  loading ...
</div>

添加一些样式，保证占位符元素不影响列表的显示：

.virtual {
  position: absolute;
  height: 200px;
  top: -200px;
  width: 100%;
  pointer-event:none;
}

结论

无限滚动也可以通过监听滚动事件来完成，但我们必须不断计算滚动位置。使用 Intersection Observer API 时，只需要提供一个回调函数，当目标元素进入视口时，会自动执行，不仅简单，而且性能更好。

关注七爪网，获取更多APP/小程序/网站源码资源！

大网站常用的页面加载动画

一、使用场景

经常见到某些网站的动画是在屏幕显示到当前元素的时候，会有个过渡动画。

页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意

使用wow.js和Animate.css，实现各大网站常用的页面加载动画

1.wow.js

实现了在网页滚动时的动画效果，有漂亮的动画效果，依赖于Animate.css。

2.Animate.css

非常优秀的CSS3动画库，不依赖于jQuery，纯CSS动画

二、使用方法

1,下载文件

animate.css 下载地址: 网址前缀+daneden.github.io/animate.css/

wow.min.js 下载地址: 网址前缀+www.downyi.com/downinfo/37040.html#address

2,引入文件

3、HTML

可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）

属性，如：

4、JavaScript

new WOW().init();

要自定义配置，可如下使用：

var wow=new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

});

wow.init();

三、兼容性

四、配置属性

elenium实现浏览器滚动效果

Selenium提供了多种方法来实现浏览器滚动效果，下面介绍几种常见的方法：

1. 使用execute_script方法

from selenium import webdriver

driver=webdriver.Chrome()

# 滚动到页面底部
driver.execute_script("window.scrollTo(0, document.body.scrollHeight)")

# 滚动到指定位置
driver.execute_script("window.scrollTo(0, 100)")

2. 使用scrollBy方法

from selenium import webdriver

driver=webdriver.Chrome()

# 向下滚动100像素
driver.scrollBy(0, 100)

# 向上滚动100像素
driver.scrollBy(0, -100)

3. 使用scrollTo方法

from selenium import webdriver

driver=webdriver.Chrome()

# 滚动到元素可见
element=driver.find_element_by_id("my_element")
driver.scrollTo(element)

4. 使用ActionChains类

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

driver=webdriver.Chrome()

# 滚动到页面底部
actions=ActionChains(driver)
actions.move_to_element(driver.find_element_by_tag_name("body")).perform()

注意事项:

滚动速度可能因浏览器和操作系统而异。
滚动到指定位置时，需要考虑元素的偏移量。
使用ActionChains类滚动可能导致页面抖动。

其他方法:

使用JavaScript代码实现滚动效果。
使用第三方库实现滚动效果，例如：Selenium-scrollScrollTo

相关链接:

Selenium官方文档: https://selenium.dev/
Selenium-scroll: [移除了无效网址]
ScrollTo: [移除了无效网址]

在线咨询

上一篇：使用 `` HTML 标签的 10 个重要技巧
下一篇：jQuery Mobile编程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。