Как предотвратить прокрутку родительского веб-сайта, когда мышь находится внутри веб-просмотраHtml

Программисты Html
Ответить
Anonymous
 Как предотвратить прокрутку родительского веб-сайта, когда мышь находится внутри веб-просмотра

Сообщение Anonymous »

У меня есть iframe веб-просмотра внутри родительской сети. Веб-просмотр можно прокручивать. Моя проблема заключается в том, что при прокрутке вниз веб-просмотра, если вы все еще прокручиваете мышь, родительский контент также прокручивается.
Что я пробовал: когда мышь входит в веб-просмотр, отключите событие колеса родительского элемента, но это не сработает. Есть решение: добавить имя класса, например, скрытый от переполнения, к родительскому элементу невозможно, потому что это приведет к удалению родителя.
Я сделал здесь демо-версию: https://codesandbox.io/p/sandbox/9wc4v3 ... l%3A7%2C33
Я также пробовал эти советы, но они не работают:
Запретить прокрутку родительской страницы, когда указатель мыши находится над встроенным iframe в Firefox

Код: Выделить всё

const target = document.getElementById("webview");

if (target) {
// Define event handler
const preventScroll = (e) => e.preventDefault();

// Track mouse position relative to the div
target.addEventListener("mouseenter", () => {
// Disable scroll globally
window.addEventListener("wheel", preventScroll, { passive: false });
window.addEventListener("touchmove", preventScroll, { passive: false });
window.addEventListener("keydown", preventKeyScroll, { passive: false });
});

target.addEventListener("mouseleave", () => {
// Re-enable scroll
window.removeEventListener("wheel", preventScroll);
window.removeEventListener("touchmove", preventScroll);
window.removeEventListener("keydown", preventKeyScroll);
});
}

function preventKeyScroll(e) {
const keys = [32, 33, 34, 35, 36, 37, 38, 39, 40];
if (keys.includes(e.keyCode)) {
e.preventDefault();
}
}

Чего я ожидаю: когда мышь находится внутри веб-просмотра, отключите прокрутку родительского элемента

Подробнее здесь: https://stackoverflow.com/questions/797 ... -a-webview
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»