Мобильная версиякод: https://jsfiddle.net/0tgo9ud8/
1-й: Запустите фрагмент кода в полноэкранном режиме.
Далее: нажмите кнопку выхода, которая появится, чтобы увидеть, как происходит сдвиг.
Как обеспечить постоянное выравнивание данных?
До того, как сработает полоса прокрутки?
Перед нажатием кнопки выхода отображается первое изображение.
После — 2-е изображение.
Что нужно изменить в коде, чтобы это исправить?
Это все, что я пытаюсь здесь сделать.
Похоже, ничего из того, что я пробовал, не помогло.
А какие идеи будут?
Вы видите, что сдвиг происходит после нажатия кнопки выхода, верно?
Как мне сохранить все в порядке?
Значит, никакого сдвига нет.
Пример изображения 2:
/*глобальный YT */ /*браузер jslint: true */ /*jslint devel: true */ window.onload = функция () { const SplashScreen = document.querySelector(".splash-screen"); SplashScreen.classList.add("скрыть"); const Panel = document.querySelector(".panel"); Panel.classList.add("слайд"); const Wrap = document.querySelector(".wrap"); SplashScreen.addEventListener("transitionend", function () { SplashScreen.style.pointerEvents = "нет"; Wrap.classList.remove("скрыть"); }); const closeButton = document.querySelector(".exitInitial"); Panel.addEventListener("transitionend", function () { closeButton.classList.add("видимый"); }); }; const videoPlayer = (функция makeVideoPlayer() { пусть игроки = []; const tag = document.createElement("script"); tag.src = "https://www.youtube.com/player_api"; const firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(тег, firstScriptTag); функция onPlayerReady (событие) { константный игрок = event.target; player.setVolume(100); если (игрок === игроки[0]) { случайный список воспроизведения (игрок); } } функция shufflePlaylist(плеер) { player.setShuffle(истина); player.playVideoAt(0); player.stopVideo(); } функция onPlayerStateChange (событие) { const eventPlayer = event.target; if (eventPlayer !== player[0]) { если (event.data === 1) { player.forEach(функция паузыOtherVideos(плеер) { const hasIframe = player.getIframe(); const isDifferentPlayer = игрок!== eventPlayer; const isPlaying = player.getPlayerState() === 1; если (hasIframe && isDifferentPlayer && играет) { player.pauseVideo(); console.log("пауза"); } }); } } } функция addPlayer(видео, playerOptions) { пусть идентификатор = video.dataset.id; если (id.startsWith("PL")) { playerOptions.playerVars = playerOptions.playerVars || {}; playerOptions.playerVars.listType = "список воспроизведения"; playerOptions.playerVars.list = идентификатор; } еще { playerOptions.videoId = идентификатор; } playerOptions.videoId = playerOptions.videoId || видео.dataset.id; playerOptions.events = playerOptions.events || {}; playerOptions.events.onReady = onPlayerReady; playerOptions.events.onStateChange = onPlayerStateChange; player.push(новый YT.Player(видео, playerOptions)); } возвращаться { добавитьPlayer, игроки }; }()); const ManagePlayer = (функция makeManagePlayer() { const playerVars = { автозапуск: 0, элементы управления: 1, отключитькб: 1, фс: 0, iv_load_policy: 3 //список воспроизведения: 1 }; константные значения по умолчанию = { высота: 360, хост: "https://www.youtube-nocookie.com", игрокВарс, ширина: 640 }; function mergePlayerOptions(opts1 = {}, opts2 = {}) { const комбинированный = Object.assign({}, opts1, opts2); Object.keys(opts1).forEach(function checkObjects(prop) { if (typeof opts1[prop] === "объект") { комбинированный[prop] = Object.assign({}, opts1[prop], opts2[prop]); } }); возврат комбинированный; } функция createPlayer(videoWrapper, playerOptions = {}) { const video = videoWrapper.querySelector(".video"); константные параметры = объединенияPlayerOptions (по умолчанию, playerOptions); вернуть videoPlayer.addPlayer(видео, параметры); } функция playerAdder(родитель, playerOptions) { константная оболочка = родительский; функция возврата () { initPlayer (обертка, playerOptions); }; } функция initPlayer(обертка, playerOptions) { createPlayer (обертка, playerOptions); } возвращаться { сумматор: playerAdder }; }()); const loadPlayer = (функция uiLoadPlayer() { функция addPlayer(playerSelector, playerOptions) { const родительский = document.querySelector(playerSelector).parentElement; обратный вызов const = ManagePlayer.adder(parent, playerOptions); перезвонить(); } возвращаться { добавить: addPlayer }; }()); функция onYouTubeIframeAPIReady() { // Инициализируем первого игрока loadPlayer.add(".playInitial", { playerVars: { петля: 1, плейлист: "s24NT7TFkUw" } }); } (функция ManagePageA() { функция handleModal(modalId) { const модальный = document.getElementById(modalId); modal.classList.remove("открыть"); } функция addTemplateToContainers() { const template = document.getElementById("image-templateA"); const CurtainContainer = document.querySelector(".panel-container"); constContainers = CurtainContainer.querySelectorAll(".container2"); контейнеры.forEach(функция (контейнер) { Container.appendChild(template.content.cloneNode(true)); }); } функция showExit(panelSelector, exitSelector) { const Panel = document.querySelector(panelSelector); const closeButton = document.querySelector(exitSelector); Panel.addEventListener("transitionend", function () { closeButton.classList.add("видимый"); }); } функция сброса страницы() { handleModal("myModal"); //addTemplateToContainers(); showExit(".panel-container", ".exit"); } функция modalClickHandler() { // Уничтожаем первого игрока, если он существует если (videoPlayer.players[0]) { videoPlayer.players[0].destroy(); } сброс страницы(); окно.scrollTo(0, 0); // Инициализируем остальных игроков при нажатии модального окна loadPlayer.add(".playa", { идентификатор видео: "CHahce95B1g" }); loadPlayer.add(".playb", { идентификатор видео: "CHahce95B1g" }); loadPlayer.add(".playc", { идентификатор видео: "CHahce95B1g" }); loadPlayer.add(".playd", { playerVars: { плейлист: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" } }); loadPlayer.add(".playe", { идентификатор видео: "CHahce95B1g" }); console.log("хит"); // myModal.classList.remove("open"); } const closeModal = document.querySelector(".exitInitial"); closeModal.addEventListener("клик", modalClickHandler); }()); (функция ManagePageB() { функция handleModal(modalId) { const модальный = document.getElementById(modalId); modal.style.display = "нет"; modal.classList.add("открыть"); modal.offsetWidth = modal.offsetWidth; modal.classList.remove("открыть"); } функция addTemplateToContainers() { const template = document.getElementById("image-templateB"); const CurtainContainer = document.querySelector(".curtain-container"); constContainers = CurtainContainer.querySelectorAll(".container2"); контейнеры.forEach(функция (контейнер) { Container.appendChild(template.content.cloneNode(true)); }); } функция скрытьКонтейнер (containerSelector) { const контейнер = document.querySelector(containerSelector); Container.classList.add("скрыть"); } функция showCurtain(curtainSelector) { const занавес = document.querySelector(curtainSelector); занавес.classList.remove("скрыть"); } функция showContainer(containerSelector) { const контейнер = document.querySelector(containerSelector); Container.classList.remove("скрыть"); } функция сброса страницы() { handleModal("myModal"); addTemplateToContainers(); скрытьКонтейнер(".containerA"); showCurtain(".контейнер-занавес"); showContainer(".containerB"); } функция exitClickHandler() { videoPlayer.players.forEach(функция (плеер) { игрок.уничтожить(); }); сброс страницы(); окно.scrollTo(0, 0); // Инициализируем остальных игроков при нажатии кнопки выхода loadPlayer.add(".playf", { идентификатор видео: "CHahce95B1g" }); loadPlayer.add(".playg", { идентификатор видео: "CHahce95B1g" }); loadPlayer.add(".playh", { идентификатор видео: "CHahce95B1g" }); loadPlayer.add(".playi", { playerVars: { плейлист: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" } }); loadPlayer.add(".playj", { идентификатор видео: "CHahce95B1g" }); console.log("хит"); } const exitButton = document.querySelector(".exit"); exitButton.addEventListener("клик", exitClickHandler); }()); svg { --color-a: #1155cc; --color-b: черный; --color-c: #1155cc; --color-d: черный; } .модальный { дисплей: нет; } тело: имеет (.modal.open) { переполнение: скрыто; } .modal.open { дисплей: гибкий; оправдание-содержание: центр; выровнять-контент: центр; отступ: 8 пикселей 8 пикселей; положение: фиксированное; /* Оставаться на месте */ z-индекс: 3; /* Сидеть сверху */ слева: 0; правильно: 0; верх: 0; внизу: 0; переполнение: авто; /* Включаем прокрутку, если необходимо */ цвет фона: прозрачный; } .modal-content { гибкий: 1 0 0; маржа: авто; максимальная ширина: 640 пикселей; граница: сплошная 21 пиксель; радиус границы: 3,2 пикселя; цвет границы: #000 #101010 #000 #101010; положение: относительное; отступ: 1 пиксель; } .modal-content::before { содержание: ""; позиция: абсолютная; верх: -2px; слева: -2 пикселей; справа: -2px; внизу: -2 пикселей; фон: #0a0a0a; граница: сплошная 1 пиксель; цвет границы: #000 #101010 #000 #101010; } .modal-content:после { содержание: ""; позиция: абсолютная; слева: 0; правильно: 0; внизу: 0; верх: 0; граница: сплошная 1 пиксель #0059dd; z-индекс: 2; события указателя: нет; /* на всякий случай*/ } :корень { --широкий: 8,8%; --угол1: 0; --угол2: -90; } .панель { позиция: абсолютная; высота: 100%; ширина: 100%; верх: 0; цвет фона: #222; нижняя граница: 2 пикселя, сплошной #191919; фоновый повтор: без повтора; z-индекс: 0; переполнение: скрыто; трансформировать: транслироватьY(0%); переход: 8 с; } .panel.slide { задержка перехода: 2 с; Transform: TranslateY(calc(-100% - 1px)); } html, тело { маржа: 0; заполнение: 0; } тело { фон: #121212; отступ: 50 пикселей 8 пикселей 0; } .containerA { } .containerB { } .контейнер { максимальная ширина: 642 пикселей; поле: 15 пикселей, авто 30 пикселей; отступ: 15 пикселей; /*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/ граница: сплошная 1 пиксель #0059dd; граница-радиус: 0; фон: линейный градиент( 45 градусов, прозрачный, прозрачный 7 пикселей, RGB(113, 121, 126) 7 пикселей, RGB(113, 121, 126) 7,5 пикселей, прозрачный 7,5 пикселей, прозрачный 10 пикселей ), линейный градиент( -45 градусов, прозрачный, прозрачный 7 пикселей, RGB(113, 121, 126) 7 пикселей, RGB(113, 121, 126) 7,5 пикселей, прозрачный 7,5 пикселей, прозрачный 10 пикселей ); размер фона: 10 пикселей 10 пикселей; } .ratio-keeper { высота: 0; отступ-верх: 56,25%; переполнение: скрыто; положение: относительное; } .ratio-keeper iframe { позиция: абсолютная; верх: 0; левый: 0; ширина: 100%; высота: 100%; } .exitInitial { трансформировать: трансли(100%); события указателя: нет; позиция: абсолютная; вставка: 0 0 0 0; z-индекс: 1; /*поле: авто авто 0;*/ вверху: авто; внизу: -1px; маржа: авто; правильно: 0; слева: 0; /*поле: 10 пикселей авто 0;*/ ширина: 47 пикселей; высота: 47 пикселей; фон: черный; радиус границы: 50%; граница: 5 пикселей, сплошная красная; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; /*поле: авто;*/ непрозрачность: 0; переход: непрозрачность 3s, легкость; задержка перехода: 1 с; события указателя: нет; } .exitInitial.visible { непрозрачность: 1; события указателя: авто; курсор: указатель; } .exitInitial::раньше, .exitInitial::after { содержание: ""; позиция: абсолютная; ширина: 100%; высота: 5 пикселей; фон: красный; преобразование: поворот (45 градусов); } .exitInitial::after { преобразование: поворот (-45 градусов); } .заставка { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; положение: фиксированное; z-индекс: 4; вставка: 0 0 0 0; фон: нет; непрозрачность: 1; /* Полностью видим */ курсор: по умолчанию; переход: непрозрачность 400 мс, легкость; } .splash-screen.hide { непрозрачность: 0; /* Полностью прозрачно */ задержка перехода: 400 мс; курсор: по умолчанию; } .панель-слева, .panel-right { положение: фиксированное; высота: 100%; /*ширина: 50%;*/ ширина: расчет (50% + 1 пиксель); /* исправление ошибки округления */ верх: 0%; переполнение: скрыто; z-индекс: 2; преобразование: TranslateX (0); переход: преобразовать 7s кубический-безье(0,645, 0,045, 0,355, 1); задержка перехода: 3 с; } .panel-left.slide { слева: 0; } .panel-right.slide { правильно: 0; } .panel-left::раньше, .panel-right::before { содержание: ""; положение: фиксированное; высота: 100%; ширина: 200%; верх: 0; слева: 0; цвет фона: прозрачный; фоновое изображение: url('data:image/svg+xml,'); } .panel-right::before { слева: -100%; } .modal:not(.open) ~ .panel-container .panel-left { Transform: TranslateX(calc(-100% - 1px)); } .modal:not(.open) ~ .panel-container .panel-right { преобразование: TranslateX(calc(100% + 1px)); } .занавеска слева, .curtain-right { положение: фиксированное; высота: 100%; /*ширина: 50%;*/ ширина: расчет (50% + 1 пиксель); /* исправление ошибки округления */ верх: 0%; переполнение: скрыто; z-индекс: 2; преобразование: TranslateX (0); переход: преобразовать 7s кубический-безье(0,645, 0,045, 0,355, 1); задержка перехода: 3 с; } .curtain-left.slide { слева: 0; } .curtain-right.slide { правильно: 0; } .curtain-left::before, .curtain-right::before { содержание: ""; положение: фиксированное; высота: 100%; ширина: 200%; верх: 0; слева: 0; цвет фона: черный; фоновое изображение: url('data:image/svg+xml,'); } .curtain-right::before { слева: -100%; } .curtain-container.hide { дисплей: блок; непрозрачность: 0; события указателя: нет; } .curtain-container:not(.hide) > .curtain-left { Transform: TranslateX(calc(-100% - 1px)); /*видимость: видимый;*/ события указателя: начальные; } .curtain-container:not(.hide) > .curtain-right { преобразование: TranslateX(calc(100% + 1px)); /*видимость: видимый;*/ события указателя: начальные; } .внутренний { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; высота: 100%; ширина: 200%; позиция: абсолютная; слева: 0; z-индекс: 2; } .panel-right .inner { слева: -100%; } .curtain-right .inner { слева: -100%; } .container2 { максимальная ширина: 510 пикселей; граница: 1 пиксель, сплошная #ccc; размер коробки: граница-коробка; максимальная высота: 100vh; соотношение сторон: 1; } .container2 div { дисплей: гибкий; оправдание-содержание: центр; } .container2 изображение { дисплей: блок; маржа: авто; ширина: 33,33%; высота: авто; } .блог-пейджер { максимальная ширина: 674 пикселей; высота: 52 пикселей; размер коробки: граница-коробка; граница: сплошная 1 пиксель #0059dd; поле: 30 пикселей авто; фон: линейный градиент( 45 градусов, прозрачный, прозрачный 7 пикселей, RGB(113, 121, 126) 7 пикселей, RGB(113, 121, 126) 7,5 пикселей, прозрачный 7,5 пикселей, прозрачный 10 пикселей ), линейный градиент( -45 градусов, прозрачный, прозрачный 7 пикселей, RGB(113, 121, 126) 7 пикселей, RGB(113, 121, 126) 7,5 пикселей, прозрачный 7,5 пикселей, прозрачный 10 пикселей ); размер фона: 10 пикселей 10 пикселей; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; } .Выход { положение: относительное; ширина: 47 пикселей; высота: 47 пикселей; фон: черный; радиус границы: 50%; граница: 5 пикселей, сплошная красная; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; /*поле: авто;*/ непрозрачность: 0; переход: непрозрачность 3s, легкость; задержка перехода: 1 с; события указателя: нет; } .exit.visible { непрозрачность: 1; события указателя: авто; курсор: указатель; } .exit::раньше, .exit::after { содержание: ""; позиция: абсолютная; ширина: 100%; высота: 5 пикселей; фон: красный; преобразование: поворот (45 градусов); } .exit::after { преобразование: поворот (-45 градусов); } .exitB а { положение: относительное; ширина: 37 пикселей; высота: 37 пикселей; фон: черный; радиус границы: 50%; граница: 5 пикселей, сплошная красная; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; /*поле: авто;*/ } .exitB a::раньше, .exitB a::after { содержание: ""; позиция: абсолютная; ширина: 100%; высота: 5 пикселей; фон: красный; преобразование: поворот (45 градусов); } .exitB a::after { преобразование: поворот (-45 градусов); } .footer { размер коробки: граница-коробка; border-top: 1px сплошной #1155cc; фон: #121212; высота: 108 пикселей; } .footer { поле: 0–8 пикселей; } .wrap.hide { дисплей: нет; } .containerB.hide { дисплей: нет; } .containerA.hide { отображать: никто;
текст | текст | тексттекст текст
текст const template = document.getElementById("image-templateA"); const CurtainContainer = document.querySelector(".panel-container"); constContainers = CurtainContainer.querySelectorAll(".container2"); контейнеры.forEach(функция (контейнер) { Container.appendChild(template.content.cloneNode(true)); });
