@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;
}

Заранее спасибо за помощь.
  • Вопрос задан
  • 266 просмотров
Пригласить эксперта
Ответы на вопрос 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);
}

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

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

Похожие вопросы