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

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()
}

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

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

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

Подписаться 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 подписчик
- 5 часов назад
- 57 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- 10 часов назад
- 261 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 14 часов назад
- 48 просмотров
0

ответов
JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- вчера
- 51 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- вчера
- 139 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- вчера
- 37 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- вчера
- 677 просмотров
3

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- вчера
- 85 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 30 апр.
- 89 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как совместить JS и Django?
- 1 подписчик
- 30 апр.
- 97 просмотров
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Конвертировать в SVG из PNG

03 мая 2024, в 01:20

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

Решить контрольную по линейной алгебре 3 мая в 10:00

03 мая 2024, в 01:14

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

Установщик на INNO SETUP

03 мая 2024, в 00:45

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

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()
}

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

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

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

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