Не прокручивается вертикальный скролл?

Question

[Павел Рябов]

Для того, чтобы слайдер отображался корректно, использую overflow: hidden у body, но при этом, естественно, возможность вертикального скроллинга пропадает, а она нужна. Когда использую overflow-x: hidden, вертикальный скролл появляется, но не прокручивается. Как сделать возможным прокрутку страницы по вертикали и при этом, чтобы слайдер выглядел корректно?

HTML:

<div class="slider">
            <input type="radio" id="trigger1" name="slider" checked>
            <label for="trigger1"></label>
            <div class="slide bg1"></div>

            <input type="radio" id="trigger2" name="slider">
            <label for="trigger2"></label>
            <div class="slide bg2"></div>

            <input type="radio" id="trigger3" name="slider">
            <label for="trigger3"></label>
            <div class="slide bg3"></div>
        </div>

CSS:

.slider {
	padding: 0px;
	margin: 0;
	height: 65%;
	text-align: center;
    overflow: hidden;
  }
  
  input {
	position: absolute;  
	opacity: 0;
	cursor: pointer;
  }
  
  label {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: solid 2px white;
	border-radius: 999px;
	background-color: transparent;
	margin: 63vh 6px 0 6px;
	z-index: 2;
	cursor: pointer;
	transition-duration: .4s;
  }
  
  input:checked + label{
	background-color: white;
  }
  
  .slide {
/*    max-width: 960px;  */
	position: absolute;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 50%;
	top: 153px;
	left: 0;
	z-index: -1;
	transform: translateX(-100%);
	transition-duration: .4s;
	opacity: 1;
}
  
  input:checked ~ .slide {
	transform: translateX(100%);
  }
  
  input:checked + label + .slide {
	transform: translateX(0);
	opacity: 1;
  }
  
  .bg1{
	background-image: url('../images/slide_img_1.jpg');
  }
  .bg2{
	background-image: url('../images/slide_img_2.jpg');
  }
  .bg3{
	background-image: url('../images/slide_img_3.jpg');
  }

.novelty {
    padding-top: 100px;
    padding-left: 9em;
}

.novelty h1, h2{
    display: flex;
    color: white;
}

.novelty h2{
    padding-top: 35px;
    font-size: .8em;
    text-align: left;
}

#add {
    display: flex;
    margin-top: 3em;
    padding: 13px 45px 13px 45px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    font-weight: 500;
    color: #FC6930;
    background-color: white;
    border-radius: 3px;
    cursor: pointer;
}

На кучу overflow в CSS не обращайте внимания, это я разные варианты пробовал, но ничего не меняется. Только когда применяется к body.

Answer 1

[Brad9aga]

я сообразил твой косяк
у слайдера relative не прописан.

Comments

[Павел Рябов]

Тааак, слушаю

[Brad9aga]

Павел Рябов, обнови

[Павел Рябов]

Brad9aga, вставил position: relative, слайдер поехал. Начал искать причину и закомментил на это время relative. Дошел до куска кода, который пробовал вчера, подумал "Зачем он мне нужен?" и удалил его. Каким-то образом все заработало. Скролл вертикальный появился и исправно работает, и при этом слайдер корректно отображается.

[Brad9aga]

Павел Рябов, у тебя картинки абослютно спозиционированы , и они спозиционированы не относительно слайдера вот и вся история была и то,что ты там писал overflow было бесполезно

Answer 2

[xonar]

Как я знаю, то никак. Но, можно сделать иначе. Блок со слайдером у которого есть вертикальная прокрутка(задаём вертикальную прокрутку), так же содержимое слайдера поворачиваем. В итоге мы получим горизонтальную прокрутку

Comments

[Павел Рябов]

У него нет вертикальной прокрутки. Когда я убираю overflow hidden справа от основного слайда появляются остальные вместе со скроллом горизонтальным.