@grizzlytour

Ни как не пойму как вернуть стандартную прокрутку сайта scroll?

Скачал шаблон слайдера, вставил его на сайт, но на странице где находится этот слайдер скрыта боковая прокрутка. Не могу понять что нужно поменять в css, что бы ее вернуть. В поисковиках невозможно найти эту информацию или она спрятана совсем глубоко под хламом ненужной информации. не судите строго, я только учусь)) вот как это выглядит: grizzlytour.ru/gallery/index.html
и вот часть кода css похоже это где-то тут:
box-sizing: border-box;
}

body {
min-height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Lora, serif;
font-size: calc(14px + .3vw);
}

.slider {
width: 100vw;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slider::before, .slider::after {
content: '';
left: -1vw;
top: -1vh;
display: block;
position: absolute;
width: 102vw;
height: 102vh;
background-position: center;
background-size: cover;
will-change: opacity;
z-index: -1;
box-shadow: 0 0 0 50vmax rgba(0, 0, 0, 0.7) inset;
}
.slider::before {
background-image: var(--img-prev);
}
.slider::after {
-webkit-transition: opacity 0.7s;
transition: opacity 0.7s;
opacity: 0;
background-image: var(--img-next);
}
.slider--bg-next::after {
opacity: 1;
}
.slider__content {
margin: auto;
width: 65vw;
height: 32.5vw;
max-height: 60vh;
will-change: transform;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
pointer-events: none;
-webkit-transform: translateZ(var(--z-distance));
transform: translateZ(var(--z-distance));
}
.slider__images {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
box-shadow: 0 0 5em #000;
}
.slider__images-item {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
will-change: transform;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
visibility: hidden;
}
.slider__images-item img {
display: block;
position: relative;
left: -1em;
top: -1em;
width: calc(100% + 1em * 2);
height: calc(100% + 1em * 2);
-o-object-fit: cover;
object-fit: cover;
will-change: transform;
}
.slider__images-item--active {
z-index: 20;
visibility: visible;
}

Заранее спасибо за помощь.
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ответы на вопрос 1
warsand
@warsand
Экспериментатор
Что такое overflow:
Формат синтаксиса: [ visible | hidden | clip | scroll | auto ]
Имеем:
body {
min-height: 100vh;
margin: 0;
padding: 0;
overflow: hidden; /* прокрутка убрана */  
font-family: Lora, serif;
font-size: calc(14px + .3vw);
}

Меняем на:
body {
min-height: 100vh;
margin: 0;
padding: 0;
overflow: scroll; /* прокрутка вставлена */  
font-family: Lora, serif;
font-size: calc(14px + .3vw);
}

- И страница вновь приобретает вертикальную прокрутку...
Ответ написан
Ваш ответ на вопрос

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

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