gpt4 book ai didi

android - Android 浏览器中奇怪的水平滚动

转载 作者:行者123 更新时间:2023-11-28 09:10:59 25 4
gpt4 key购买 nike

在 Android 设备上查看以下演示:

Scrolling Demo

有一个略微偏离屏幕的红色方框。当垂直分隔符不存在时,您不能向任何方向拖动页面。当存在分隔符并占用比窗口更多的垂直空间时,您可以向下拖动页面(如预期的那样),但是现在您也可以水平拖动。

这似乎只发生在 Android 浏览器上。关于这里发生的事情的任何线索?我想在保留垂直滚动的同时完全阻止水平滚动。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" id="viewportMobile" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="test.css" />
<style>
html,body {
overflow: hidden;
}
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: visible;
overflow-x: hidden;
}
.offscreen {
position: absolute;
right: -20px;
background-color: #ed0021;
padding: 20px 20px 20px 20px;
}
</style>
<script>
var showSpacer=true;
function toggleSpacer() {
showSpacer = !showSpacer;
var spacer = document.getElementById('spacer');
spacer.style.display = showSpacer ? 'block' : 'none';
}
</script>

</head>
<body>
<div class="toggle-button" onClick="toggleSpacer()">Toggle Spacer</div>
<div class="offscreen"></div>
<div id="spacer" style="width:50px; height:2000px; background-color:#444">
</div>
</body>
</html>

最佳答案

删除溢出属性并将 body 元素的位置更改为 relative 对我有用。它应该看起来像这样:

body {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

编辑:错误的复制/粘贴

编辑 2:更新的答案

关于android - Android 浏览器中奇怪的水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26507366/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com