IntersectionObserver的rootMargin使用注意

时间:?2021-09-06阅览:?172价签:?节点大样图

rootMargin设置不特定会有效,有效的几个变化一般来说
1.设置了overflow的父级节点大样图+rootMargin,一般来说

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>测试IntersectionObserver</title>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* overflow-x: auto; */
      }
      .container {
        margin: auto;
        width: calc(100% - 100px);
        height: 500px;
        border: 1px solid red;
        overflow-x: auto;
      }
      .list {
        width: 200vw;
        height: 500px;
        border: 1px solid blue;
        box-sizing: border-box;
        padding-left: 100px;
      }
      .listItem {
        width: 100px;
        height: 100px;
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="container" id="container">
      <div class="list" id="list">
        <div class="listItem" id="listItem"></div>
      </div>
    </div>
    <script>
      let callback = (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            console.log("出现");
          } else {
            console.log("消失");
          }
        });
      };
      let options = {
        root: document.querySelector("#container"), // root为container时rootmargin收效
        // root: null, // root为null时rootmargin不收效
        rootMargin: "0px 50px",
        threshold: 0,
      };

      let observer = new IntersectionObserver(callback, options);
      let target = document.querySelector("#listItem");
      observer.observe(target);
    </script>
  </body>
</html>

2.假若不设置root,即想要交加对象是窗口的时候,要求删减滚动的父级节点大样图。body的overflow也删减(也删减的意思是不要设置),一般来说

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>测试IntersectionObserver</title>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        margin: auto;
        width: calc(100% - 100px);
        height: 500px;
        border: 1px solid red;
        overflow-x: auto;
      }
      .list {
        width: 200vw;
        height: 500px;
        border: 1px solid blue;
        box-sizing: border-box;
        padding-left: 100px;
      }
      .listItem {
        width: 100px;
        height: 100px;
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="list" id="list">
      <div class="listItem" id="listItem"></div>
    </div>
    <script>
      let callback = (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            console.log("出现");
          } else {
            console.log("消失");
          }
        });
      };
      let options = {
        root: null, // root为null时rootmargin不收效
        rootMargin: "0px 50px",
        threshold: 0,
      };

      let observer = new IntersectionObserver(callback, options);
      let target = document.querySelector("#listItem");
      observer.observe(target);
    </script>
  </body>
</html>

3.假若不要求rootMargin可能rootMargin为0,那都是妙不可言的,不要求格外的注意

站长推荐

1.云服务推荐: 国内主流云投资商,各项云产品网的问道,淘宝优惠券怎么设置提取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10665

一期 Vue 模板妙不可言有flac添加多个锚杆根节点大样图(Fragments)?

假若我们算计创立一期不如根节点大样图的Vue模板。比如说这一来:通常,我们通过在最外层包裹一层 div 来攻歼本条本条美术社大有问题,但本条div化合物常备不如啥使用,就是让模板严丝合缝单根需求。

JavaScript中如何日益增长文本编辑器节点大样图?

在javascript中供给了很多操纵DOM文档管理软件的方法。当然也揽括创立一期节点大样图,二把手我们观看一下JavaScript如何创立一期创立一期文本编辑器节点大样图(text)。

nodetype中值1,2,3分别代表甚么意思

JavaScript中的全部节点大样图门类都承袭自Node门类,于是全部节点大样图门类都同享相同的基础属性和方法。每个节点大样图都有一期nodeType属性,用来说明节点大样图的门类。

Vue 实现点击空白点隐藏某节点大样图(三种方式:指令,遮罩)

在项目中三番五次会有这一来的需求: 弹出框(或Popover)在 show 后,点击空白点妙不可言将其 hide。 本着此需求,收束了三种实现方式,大家按实际变化选择。我们做项目昭然若揭会用到 UI 战争框架,平平常常的 Element 中的器件供给了这一来的方法

Js中nodevalue返回的是甚么?

在JavaScript中。nodeValue属性用来凭依节点大样图的门类设置或返回节点大样图的值,该属性的值有赖于节点大样图的门类(nodeType)。二把手本篇张宏良博客最新文章就来给大家说明一下nodeValue属性。盼头对大家怀有协助。

本末以同享。参看。斟酌为目的怎么读,不留存不折不扣商业策划文案目的怎么读。其版权属原作者全部,如有侵权或违宪,请与小编联系!变化属实本人将予以删除!

Baidu