Verificare se l'elemento Javascript è visibile-Esempi di codice

Radu TM

Verificare se l'elemento Javascript è visibile

JavaScript di Radu TM June 10, 2022

window.getComputedStyle(document.getElementById("mydivID"), null)
  .getPropertyValue('display')

0

26.941

Come verificare se l'elemento è visibile dopo lo scorrimento in Next.js?

JavaScript di Radu TM June 07, 2022

import React, { useState, useEffect } from 'react';

function useIsElementVisibleAfterScrolling(ref) {
  // Proprietà e metodo per memorizzare se l'elemento è visibile dopo lo scorrimento
  const [isElementVisible, setIsElementVisible] = useState(false);

  useEffect(() => {
    // Funzione per verificare se l'elemento è visibile dopo lo scorrimento
    function checkIfElementIsVisibleAfterScrolling() {
      // Ottieni la posizione dello scorrimento verticale
      const scrollPosition = window.scrollY || window.pageYOffset;

      // Ottieni la posizione dell'elemento
      const elementPosition = ref.current.getBoundingClientRect().top;

      // Verifica se l'elemento è visibile dopo lo scorrimento (cioè la posizione dell'elemento è inferiore alla posizione dello scorrimento)
      if (elementPosition <= scrollPosition) {
        setIsElementVisible(true);
      } else {
        setIsElementVisible(false);
      }
    }

    // Aggiungi un listener di eventi per quando l'utente scorre
    window.addEventListener('scroll', checkIfElementIsVisibleAfterScrolling);

    // Chiama la funzione inizialmente per verificare se l'elemento è visibile dopo lo scorrimento
    checkIfElementIsVisibleAfterScrolling();

    // Rimuovi il listener di eventi durante il cleanup
    return () => window.removeEventListener('scroll', checkIfElementIsVisibleAfterScrolling);
  }, [ref]); // Un array vuoto significa che l'effetto verrà eseguito solo all'avvio e alla chiusura

  return isElementVisible;
}

export default function ScrollingComponent() {
  const componentRef = useRef(null);
  const isComponentVisible = useIsElementVisibleAfterScrolling(componentRef);

  return (
    <div ref={componentRef}>
      {isComponentVisible ? 'Sono visibile!' : 'Non sono ancora visibile'}
    </div>
  );
}

0

10.218

Come verificare se l'elemento è visibile dopo lo scorrimento in Next.js?

JavaScript di Radu TM June 07, 2022

import React, { useEffect, useState } from 'react';

function useIsElementVisibleAfterScrolling(ref, options = {}) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsVisible(entry.isIntersecting);
    }, options);

    observer.observe(ref.current);

    return () => {
      observer.unobserve(ref.current);
    };
  }, [ref, options]);

  return isVisible;
}

export default function App() {
  const [isVisible, setIsVisible] = useState(false);
  const [targetElement, setTargetElement] = useState(null);

  function handleClick() {
    setIsVisible(true);
    setTargetElement(target.current);
  }

  const target = useRef(null);
  const isTargetVisible = useIsElementVisibleAfterScrolling(target, {
    threshold: 0.5,
  });

  return (
    <div>
      <div ref={target}>
        {isTargetVisible ? 'Visibile' : 'Non visibile'}
      </div>
      <button onClick={handleClick}>
        Controlla se l'elemento è visibile
      </button>
    </div>
  );
}

0

10.218

Come verificare se l'elemento è visibile dopo lo scorrimento in Next.js?

JavaScript di Radu TM June 07, 2022

import React, { useState, useEffect } from "react";

// Questa funzione restituisce true se l'elemento passato è all'interno della visualizzazione della finestra.
const isScrolledIntoView = (el) => {
  const rect = el.getBoundingClientRect();
  const elemTop = rect.top;
  const elemBottom = rect.bottom;

  // Solo gli elementi completamente visibili restituiscono true:
  const isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  // Gli elementi parzialmente visibili restituiscono true:
  //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
  return isVisible;
};

export default function App() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // Ottieni l'elemento passato:
    const element = document.getElementById("myElement");

    // Chiama isScrolledIntoView sugli eventi di scorrimento:
    document.addEventListener("scroll", () => {
      setIsVisible(isScrolledIntoView(element));
    });
  }, []);

  return (
    <div>
      <div id="myElement">
        This element is {isVisible ? "visibile" : "non visibile"} after scrolling.
      </div>
    </div>
  );
}

0

10.218

Richieste JavaScript simili

Ultime richieste JavaScript

Esplora gli esempi di codice per categorie