Predaytor
@Predaytor
C# .NET Core, React, Typescript

Проблема Паралакса. Как убрать эффект на моб. устройствах (сделать тач скроллинг)?

Нашел хороший чистый способ паралакса на https://www.okgrow.com/posts/css-only-parallax
Но на моб. устройствах само собой пропадает (инертный и плавный) скролл. Можно решить свойством -webkit-overflow-scrolling: touch. Но позиционирование изображения ведет себя странно, при прокрутке вверх проявляються другие части (скрытые почему-то) изображения, контент снизу пропадает.

Можно просто убрать все значения назад, в media. Паралакса не будет, все отлично. Но как сделать это только на моб. устройствах, а не на разрешение экрана ?

//Parallax Sass syntax
.MainContainer
	perspective: 1px
	transform-style: preserve-3d
	height: 100vh
	overflow-x: hidden
	overflow-y: scroll


.ParallaxContainer
	display: block
	position: relative
	height: 100vh
	width: 100vw
	transform: translateZ(-1px) scale(2)
	z-index: -1
	background-image: url(overwatch.jpg)
	background-size: cover
	background-position: center
	background-repeat: no-repeat


.ContentContainer
	display: block
	position: relative
	background-color: white
	z-index: 1
	padding: 10%


<div class="MainContainer">

  <div class="ParallaxContainer"></div>

  <div class="ContentContainer">
    <div class="Content">
	     lorem80 
    </div>
  </div>
</div>
  • Вопрос задан
  • 338 просмотров
Пригласить эксперта
Ответы на вопрос 1
sharomet
@sharomet
Front-End
Если вас не устраивают media запросы - то вы можете
1. с помощью javascript(jquery) проверять какое устройство(OS или тип браузера), если это мобильное устройство то добавляйте класс к body и к нему уже привязывайтесь.
2. Если же паралакс добавляется с помощью js то просто проверяйте какое устройство и инициалезируйте ваш паралакс плагин.

1:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('body').addClass('mobile');
}


body.mobile {
Стили что бы убрать паралакс
}

2:
//Если это не мобильное устройство то инициализируем parallax
if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.parallax').initFunction();
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы