Мобильная версияКороче, естьверхний элемент навигации. Ниже приведен основной элемент, занимающий остальную высоту области просмотра. В этом основном элементе есть два раздела, представляющие слайд. Эти разделы располагаются горизонтально рядом друг с другом с помощью флексбокса. Аспект скольжения исходит из крошечного фрагмента JavaScript, который устанавливает, например, преобразование TranslateX(-100vw) в главном элементе для отображения второго слайда. Все работает хорошо.
Теперь содержимое слайдов по вертикали больше высоты области просмотра. Поэтому я хочу сделать прокручиваемый отдельно левый и правый контент. Это работает, когда я устанавливаю переполнение: скрыто для основного элемента, однако преобразование перестает работать, и при нажатии стрелки слайды не отображаются.
Во включенном фрагменте я прокомментировал переполнение: скрыто, чтобы работала хотя бы скользящая часть. Как только вы раскомментируете эту строку, скольжение перестанет работать, но вертикальные полосы прокрутки содержимого слайда появятся правильно.
Теперь мой вопрос: почему происходит преобразование: TranslateX(...) перестает работать, когда установлено переполнение основного элемента? И как мне это сделать, чтобы работали и скользящие и полосы прокрутки содержимого слайда?
Код: Выделить всё
const main = document.querySelector('main');
function openSlide(slide) {
main.style.transform = `translateX(-${slide * 100}vw)`;
}
window.addEventListener('keydown', function(event) {
if (['ArrowLeft', 'ArrowRight'].includes(event.key)) {
event.key === 'ArrowLeft' ? openSlide(0) : openSlide(1);
event.preventDefault();
}
});
openSlide(0);Код: Выделить всё
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
font-family: sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
width: 100%;
height: 100vh;
font-size: 7vh;
display: flex;
flex-direction: column;
}
nav {
padding: 2vh;
}
main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
transition: transform 0.6s ease-in-out;
/* Uncommenting the statement below, will correctly set the height of the "main" section (i.e. scrollbars appear for both ".left" & ".right"), but the "transform: translateX(...)" doesn't work anymore. */
/* overflow: hidden; */
}
section.slide {
padding: 2vh;
min-width: 100vw;
max-width: 100vw;
display: flex;
flex-flow: row nowrap;
}
section.slide .left {
width: 55vw;
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
}
section.slide .left > div {
background-color: yellow;
margin-bottom: 5vh;
}
section.slide .right {
width: 45vw;
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
}
section.slide .right > div {
background-color: red;
margin-bottom: 5vh;
}Код: Выделить всё
Navigation - press left or right arrow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.
Подробнее здесь: https://stackoverflow.com/questions/790 ... -transform
