Как остановить скролл на последнем фрейме?

Question

Fox 777 @Fox7777

Люблю python

JavaScript

Как остановить скролл на последнем фрейме?

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Квартира</title>
</head>

<body>
	<div class="container">
		<section class="gallery">
			<div class="frame frame-bg">
				<div class="frame-content">
					<h2>minimalism</h2>
				</div>
			</div>
			<div class="frame">
				<div class="frame-content">
					<div class="frame-media frame-media-left" style="background-image: url(img/1.jpg);"></div>
				</div>
			</div>
			<div class="frame">
				<div class="frame-content text-right">
					<h3>comfortable</h3>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa optio illo accusamus excepturi, provident
						cupiditate omnis similique obcaecati tempore, amet explicabo sapiente animi ut itaque tempora rem minima
						laboriosam consequuntur!</p>
				</div>
			</div>
			<div class="frame">
				<div class="frame-content">
					<div class="frame-media frame-media-right" style="background-image: url(img/2.jpg);"></div>
				</div>
			</div>
			<div class="frame frame-bg">
				<div class="frame-content">
					<div class="frame-media frame-media-left" style="background-image: url(img/3.jpg);"></div>
				</div>
			</div>
			<div class="frame">
				<div class="frame-content">
					<div class="frame-media frame-media-right" style="background-image: url(img/4.jpg);"></div>
				</div>
			</div>
			<div class="frame frame-bg">
				<div class="frame-content frame-bg">
					<div class="frame-media frame-media-left" style="background-image: url(img/5.jpg);"></div>
				</div>
			</div>
			<div class="frame">
				<div class="frame-content">
					<h5>&copy; Almaz Gayazov</hr>
				</div>
			</div>
		</section>
	</div>
	<audio class="audio" src="media/ambient.mp3"></audio>
	<img class="soundbutton paused" src="./img/sound.gif" alt="" class="sound">
	<script src="main.js"></script>
</body>

</html>

let zSpacing = -1000,
	lastPos = zSpacing / 5,
	$frames = document.getElementsByClassName('frame'),
	frames = Array.from($frames),
	zVals = []

window.onscroll = function () {
	let top = document.documentElement.scrollTop,
		delta = lastPos - top
	lastPos = top

	frames.forEach(function (n, i) {
		zVals.push((i * zSpacing) + zSpacing)
		zVals[i] += delta * -5.5
		let frame = frames[i],
			transform = `translateZ(${zVals[i]}px)`,
		opacity = zVals[i] < Math.abs(zSpacing) / 1.8 ? 1 : 0
		
		frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`)
	});
}
window.scrollTo(0, 1)


let soundbutton = document.querySelector('.soundbutton'),
		audio = document.querySelector('.audio')

soundbutton.addEventListener('click', e =>{
	soundbutton.classList.toggle('paused')
	audio.paused ? audio.play() : audio.pause()
})

window.onfocus = function(){
	soundbutton.classList.contains('paused') ? audio.pause() : audio.play()
}

window.onblur = function() {
	audio.pause()
}

Как сделать остановку скролла на последнем фрейме, никак не могу понять

Вопрос задан более года назад
45 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Решения вопроса 1

5 комментариев

Fox 777 @Fox7777 Автор вопроса

Скроллиться но сразу возвращает обратно, даже дальше 1 фрейма не уходит, может вам css код нужен?

Написано более года назад
Lapita12 @Lapita12

Fox 777,
Спасибо за предложение, но в коде, который вы предоставили, проблема скорее всего не связана с CSS. Возможно, ошибка связана с логикой изменения значений переменных zVals и lastPos.

Я рекомендую добавить console.log внутри функции обработчика события onscroll, чтобы проверить, какие значения используются при каждом скроллинге. Также стоит проверить, работает ли код без использования переменной delta. Кроме того, можете попробовать использовать window.requestAnimationFrame вместо обычного обновления стилей для улучшения производительности.

К сожалению, без доступа к полному коду и HTML разметке я не могу дать более точного ответа.

Написано более года назад

Lapita12 @Lapita12

Это может быть вызвано тем, что код прокрутки генерирует и устанавливает новый CSS-атрибут каждый раз при прокрутке, и этот процесс может вызвать дрожание и возврат на место.

Попробуйте изменить код таким образом, чтобы он устанавливал CSS-атрибуты только в самом начале прокрутки и не более одного раза.

Например, вы можете вынести установку CSS-атрибутов из функции-обработчика прокрутки в отдельную функцию, которая будет вызываться только один раз при загрузке страницы. Затем функция-обработчик прокрутки может просто изменять значения заранее установленных атрибутов для каждого кадра.

let zSpacing = -1000;
let lastPos = zSpacing / 5;
let $frames = document.getElementsByClassName('frame');
let frames = Array.from($frames);
let zVals = [];

const lastFrame = $frames[$frames.length - 1];
const lastFrameHeight = lastFrame.offsetHeight;
const lastFrameTop = lastFrame.offsetTop;

// функция для установки начальных CSS-атрибутов
function setInitialStyles() {
  frames.forEach(function(n, i) {
    zVals.push((i * zSpacing) + zSpacing);
    let transform = `translateZ(${zVals[i]}px)`;
    let opacity = 0;
    if (zVals[i] < Math.abs(zSpacing) / 1.8) {
      opacity = 1;
    }
    frames[i].setAttribute('style', `transform: ${transform}; opacity: ${opacity};`);
  });
}

// вызываем функцию установки начальных CSS-атрибутов
setInitialStyles();

window.onscroll = function() {
  let top = document.documentElement.scrollTop;
  let delta = lastPos - top;
  lastPos = top;
  frames.forEach(function(n, i) {
    zVals[i] += delta * -5.5;
    let transform = `translateZ(${zVals[i]}px)`;
    let opacity = 0;
    if (zVals[i] < Math.abs(zSpacing) / 1.8) {
      opacity = 1;
    }
    frames[i].setAttribute('style', `transform: ${transform}; opacity: ${opacity};`);
  });
  if (top + window.innerHeight >= lastFrameTop + lastFrameHeight) {
    window.scrollTo(0, lastFrameTop);
  }
};

window.scrollTo(0, 1);

let soundbutton = document.querySelector('.soundbutton');
let audio = document.querySelector('.audio')

soundbutton.addEventListener('click', e => {
  soundbutton.classList.toggle('paused')
  audio.paused ? audio.play() : audio.pause()
});

window.onfocus = function() {
  soundbutton.classList.contains('paused') ? audio.pause() : audio.play()
};

window.onblur = function() {
  audio.pause()
};

Написано более года назад

Fox 777 @Fox7777 Автор вопроса

всё, заработало, спасибо, поправил чутка код и заработало)

Написано более года назад
Lapita12 @Lapita12

Fox 777, Обращайтесь)

Написано более года назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 31 минуту назад
- 20 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- час назад
- 16 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 2 часа назад
- 21 просмотр
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 137 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 160 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 82 просмотра
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 50 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать дизайн для кондитерской

22 нояб. 2024, в 13:58

50000 руб./за проект

Написание статей в нужном стиле ( интерьер, дизайн спальни )

22 нояб. 2024, в 13:52

2000 руб./за проект

Необходимо доработать расширение для Google Chrome

22 нояб. 2024, в 13:51

5000 руб./за проект

Answer 1 · 2023-03-09 16:50:41

let zSpacing = -1000,
  lastPos = zSpacing / 5,
  $frames = document.getElementsByClassName('frame'),
  frames = Array.from($frames),
  zVals = [];

const lastFrame = $frames[$frames.length - 1];
const lastFrameHeight = lastFrame.offsetHeight;
const lastFrameTop = lastFrame.offsetTop;

window.onscroll = function() {
  let top = document.documentElement.scrollTop,
    delta = lastPos - top
  lastPos = top

  frames.forEach(function(n, i) {
    zVals.push((i * zSpacing) + zSpacing)
    zVals[i] += delta * -5.5
    let frame = frames[i],
      transform = `translateZ(${zVals[i]}px)`,
    opacity = zVals[i] < Math.abs(zSpacing) / 1.8 ? 1 : 0
    
    frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity};`);
  });

  if (top + window.innerHeight >= lastFrameTop + lastFrameHeight) {
    window.scrollTo(0, lastFrameTop);
  }
};

window.scrollTo(0, 1);

let soundbutton = document.querySelector('.soundbutton'),
    audio = document.querySelector('.audio')

soundbutton.addEventListener('click', e =>{
  soundbutton.classList.toggle('paused')
  audio.paused ? audio.play() : audio.pause()
})

window.onfocus = function(){
  soundbutton.classList.contains('paused') ? audio.pause() : audio.play()
}

window.onblur = function() {
  audio.pause()
}

Как остановить скролл на последнем фрейме?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт