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

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

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

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

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

Подписаться 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

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 11 минут назад
- 3 просмотра
0

ответов
JavaScript

Средний
Postman. Как увеличить время жизни токена?
- 1 подписчик
- час назад
- 59 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 20 часов назад
- 98 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 89 просмотров
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 1490 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 58 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 99 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 214 просмотров
2

ответа
JavaScript

+2 ещё

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

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

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

До 220 000 ₽

Доработка сайта на Vue и node

23 дек. 2024, в 11:07

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

Разработать 3D модель лопасти

23 дек. 2024, в 10:43

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

Разработать принципиальную схему в Altium Designer

23 дек. 2024, в 10:32

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

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

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

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

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

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