Задать вопрос
@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;
}

Заранее спасибо за помощь.
  • Вопрос задан
  • 305 просмотров
Подписаться 1 Простой 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 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);
}

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

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

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