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>
  • Вопрос задан
  • 397 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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