IT путешествие

Несмотря на наличие position: sticky; в css я бы не назвал его простым в использовании: нужно выполнение большого количества условий для его реализации. Предлагаю решение на js. // выберите элемент за которым надо следить const isSticky = false; const element = document.getElementById('.element'); const windowHeight = window...

Про этот метод многие знают, но страница может при загрузке перевести вас куда-нибудь в середину. Поэтому лучше учитывать также положение body и высчитывать разницу. const bodyRect = document.body.getBoundingClientRect(); const elemRect = document...

Если вам потребовалось обернуть компонент в <ClientOnly> и нужно получить доступ к нему, то попробуйте схему ниже ------------------------- <script setup lang="ts"> onMounted(async (): Promise<void> => { await nextTick(); await nextTick(); console...

Недавно устанавливал приложение Nuxt на сервер (ос Ubuntu 22) и обнаружил ошибку в NuxtImg - на продакшене он не работает. Долго искал почему и узнал, что требуется установить еще один пакет. npm install...

Недавно у меня была проблема - я пытался сделать красивое появление картинки, после ее загрузки. Но не мог это сделать при анимированном page transition. И до этого при больших списках элементов не все было гладко. Теперь же я понял в чем была ошибка - нужно было использовать onMounted) компонент BaseImage <script setup lang="ts">. .. const props = defineProps({ ... }) let isLoaded = ref<boolean>(false) function onLoad(): void { isLoaded.value = true } onMounted(async (): Promise<void> => { await nextTick() onLoad() }) </script> <template> <div :class="cn('relative', props...