• Есть ли смысл удалять DOMContentLoaded listener после срабатывания?

    @Flyheck
    Нет смысла удалять, т.к. это не является критической оптимизацией. Гарантий того, что он удалится сборщиком мусора так же нет.
    Ответ написан
  • Как сделаь анимацию увеличения canvas в Framer Motion, Three.js и React.js по клику?

    @Flyheck
    Чтобы увеличить куб по оси Y при клике, вам нужно использовать состояние и функцию для обработки клика. Затем, вы можете использовать Framer Motion для анимации изменения размера. Вот пример кода, который делает это:
    import React, { useState } from "react";
    import { Canvas } from "@react-three/fiber";
    import { motion } from "framer-motion";
    
    const Cube = (props) => {
      const [scaleY, setScaleY] = useState(1);
    
      const handleCubeClick = () => {
        setScaleY((prevScaleY) => (prevScaleY === 1 ? 2 : 1));
      };
    
      return (
        <div id="canvas-container">
          <Canvas>
            <ambientLight />
            <pointLight position={[10, 20, 15]} />
            <motion.mesh
              rotation={[0, 15, 0]}
              position={[1, 1, 1]}
              onClick={handleCubeClick}
              scale={[1, scaleY, 1]}
              transition={{ duration: 0.5 }}
            >
              <boxGeometry attach="geometry" args={[0.3, 0.3, 0.3]} />
              <meshStandardMaterial attach="material" color={"#b467ce"} />
            </motion.mesh>
          </Canvas>
        </div>
      );
    };
    
    export default Cube;

    В этом примере, я добавил состояние scaleY, которое будет меняться при клике на куб. В функции handleCubeClick мы переключаем значение между 1 и 2. Затем, я добавил свойство scale к motion.mesh, которое меняет масштаб куба по оси Y. Я также добавил transition с длительностью анимации в 0.5 секунды.

    Теперь при клике на куб, он будет увеличиваться и уменьшаться по оси Y с анимацией.
    Ответ написан
    Комментировать
  • Как работает window.scrollTo - проблема?

    @Flyheck
    Возможно, у вас есть какой-то другой код или сторонний скрипт, который вызывает прокрутку обратно наверх после вашего события прокрутки. Для решения этой проблемы я рекомендую следующее:

    Убедитесь, что у вас нет других скриптов или плагинов, которые могут вызывать прокрутку страницы. Временно отключите их, чтобы проверить, не они ли вызывают такое поведение.

    Используйте setTimeout для добавления небольшой задержки перед выполнением прокрутки. Это может помочь, если другой скрипт выполняет прокрутку после вашего события прокрутки.
    window.onload = function() {
      setTimeout(function() {
        window.scrollTo({
          top: 100,
          left: 0,
          behavior: "smooth"
        });
      }, 500); // Задержка в 500 миллисекунд
    };

    Вы можете попробовать использовать стек вызовов для поиска места, где вызывается лишняя прокрутка.
    window.addEventListener("scroll", function() {
      console.log("Прокрутка вызвана", new Date().getTime());
      console.trace(); // Вывод стека вызовов
    });
    Ответ написан
    Комментировать
  • Как корректно добиться эффекта pointer-events: none на сенсорном устройстве?

    @Flyheck
    В некоторых ситуациях свойство pointer-events: none может не работать на мобильных устройствах. Чтобы обойти это ограничение, вы можете использовать следующий подход:
    Удалите свойство pointer-events: none из объекта draggedElementStyles.
    Вместо этого добавьте следующую функцию, чтобы определить элемент, который находится под указателем:
    function elementFromPointWithExclusion(x, y) {
      // Сначала скрываем draggedElement
      draggedElement.style.display = 'none';
      // Затем получаем элемент, который находится под указателем
      const element = document.elementFromPoint(x, y);
      // Возвращаем draggedElement обратно на место
      draggedElement.style.display = '';
      return element;
    }

    Замените строки console.log(event.target) и logEventTarget.innerText = event.target.outerHTML;
    на следующий код:
    const targetElement = elementFromPointWithExclusion(event.clientX, event.clientY);
    console.log(targetElement);
    logEventTarget.innerText = targetElement.outerHTML;

    Теперь вместо использования event.target, вы будете использовать элемент, найденный с помощью функции elementFromPointWithExclusion. Это позволит вам определить элемент, который находится под перетаскиваемым элементом, даже на мобильных устройствах.

    Хотя это и может показаться костылем, на самом деле это общепринятый подход для решения данной проблемы.
    К сожалению, существует ограничение в поведении событий touch на мобильных устройствах, из-за которого они не пропускаются через элементы с pointer-events: none. Это означает, что нет прямого способа для получения элемента под перетаскиваемым объектом с использованием только touch событий. Вместо этого, document.elementFromPoint() используется для обхода этой проблемы.
    Ответ написан
    2 комментария