У меня есть вопрос, на который наполовину ответили другие сообщения, подобные этому: Overflow-x: скрытый не предотвращает переполнение контента в мобильных браузерах
или что:
Работает ли переполнение: скрыто для на iPhone Safari?
Вопрос по этому поводу overflow:hidden в iOS Safari и mobile Chrome не работает так, как я ожидал.
overflow:hidden на теле работает для Firefox.И если вы попробуете приведенный ниже код в Firefox, это именно то, как он должен работать.
Итак, я уже вижу, overflow:hidden не работает над телом для iOS Safari и мобильного Chrome - вы должныоберните все в div ниже тела и дайте ему overflow:hidden.Но этот путь, к сожалению, не делает то, что я хочу, потому что он игнорирует функцию JavaScript scrollLeft.
Вот краткое описание того, что должно произойти:
Вы открываете сайт.Тело или оболочка будут видны наполовину, потому что у них есть width:180%.
Код jQuery прокручивает все это до {scrollLeft:(right)}, где он должен оставаться.(по крайней мере, по оси X)
Нажатие на кнопку должно переместить сайт влево, где также должен остаться сайт.(по оси x / по оси y должна быть возможность прокрутки) Возможно, это немного сложно;не стесняйтесь копировать код, если вы хотите попробовать его самостоятельно.
Я думаю, что проблема может заключаться в том, что overflow:hidden перезаписывается или перезаписывает функцию JavaScript.
У кого-нибудь есть идеи, как решить эту проблему?Может быть, другой способ сказать браузеру не прокручивать по оси X ...
Вот мой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scroll test</title>
<style>
@charset "UTF-8";
:root {
--blue: #127296;
}
html {
height: 100%;
font-size: 20px
}
body {
margin: 0px;
overflow-x: hidden;
}
.wrapper {
/* overflow-x: hidden; */
}
.textfeld {
color: var(--blue);
padding: 30px 35px 150vh 35px;
}
.white {
color: white;
}
button {
border: none;
background: none;
font-size: 1em;
padding: 2px 5px 15px 5px;
align-self: center;
}
.eins {
grid-column: 1/ span 6;
}
.zwei {
grid-column: 7 / -1;
background-color: var(--blue);
}
#content {
width: 180%;
grid-template-columns: repeat(12, 1fr);
margin: 0px;
height: auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="content">
<div class="spalte eins fr">
<div class="textfeld content">
<button type="button" name="button" class="button_2">Click</button>
</div>
</div>
<div class="spalte zwei">
<div class="textfeld content de white">
<button type="button" name="button" class="button">Click</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var left = $(document).outerWidth() - $(window).width();
var right = $(window).width() - $(document).outerWidth();
$('body, html').scrollLeft(left);
$(".button").click(function() {
$('body, html').animate({
scrollLeft: (right)
}, 200);
console.log("click");
});
$(".button_2").click(function() {
$('body, html').animate({
scrollLeft: (left)
}, 200);
});
});
</script>
</html>