当元素开始在窗口中显示时应用类

Question

当用户滚动并开始显示元素时，我想在箭头底部应用一个类（将APPNAME和translateY从opacity更改为0）。仅发生这些动画1次。当菜单变为1时，箭头仅次于。您可以看到一个示例here。

这是箭头：

我该怎么做？

我尝试过，但这不记录偏移量的底部，只记录滚动顶部：

fixed

Answer 1

您看过Intersection Observer API吗？它是本机JavaScript，因此不需要jQuery。支持not perfect，但Safari已采用它，它将成为其下一个移动和桌面版本的一部分。同时，您可以添加polyfill以获得全面支持。

来自MDN：

  

Intersection Observer API提供了一种异步观察的方法   目标元素与祖先相交的变化   元素或具有顶级文档的视口。

一旦元素进入视口，我就向图像容器添加一个active类。一旦active，箭头的容器就会固定在屏幕底部附近（并保持可见）。

// Fires when element appears in the viewport
function onEntry(entry) {
  if (entry[0].isIntersecting) {
    entry[0].target.classList.add("active");
  }
}

// Instantiate a new Intersection Observer
let observer = new IntersectionObserver(onEntry);

let element = document.querySelector(".arrow-down");
observer.observe(element);

.arrow-down {
  opacity: 0;
  position: absolute;
  transition: 0.3s opacity;
}

.arrow-down.active {
  opacity: 1;
  cursor: pointer;
  position: fixed;
  bottom: 1em;
  animation: showArrowDown 1s alternate infinite;
}

@keyframes showArrowDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(1em);
  }
}

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<div class="arrow-down">
  <img src="https://i.stack.imgur.com/WtisH.png" alt="down arrow" />
</div>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

Answer 2

我建议您使用lazysizes。 https://github.com/aFarkas/lazysizes

IMO，十字路口的观察员不是那么好。

使用lazysizes可以让它延迟加载所有图像，并指定data-expand属性以相对于视口延迟加载图像时进行微调。 示例：

from selenium import webdriver from selenium.webdriver.common.by import By chrome_path =r'C:\Program Files (x86)\Google\Chrome\Application\chrome.exe' chromedriver_path = r'C:\Users\user\Desktop\chromedriver.exe' driver = webdriver.Chrome(chromedriver_path) driver.get("https://www.google.com/search?q=pepega&rlz=1C1GIWA_enGB617GB617&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjH1e6b-YfhAhWRs3EKHeKmAqoQ_AUIDigB&biw=2560&bih=947") reviews = driver.find_elements_by_xpath("//div[@jscontroller ='Q7Rsec']/a/img") list_review=[] for review in reviews: if review.get_attribute("src") is not None: list_review.append(review.get_attribute("src")) print(list_review) print(len(list_review))

根据视口和数据扩展标志，在认为适合加载时，它将类更改为延迟加载。 现在，就像将您的CSS添加到.arrow.lazyloaded

中一样简单