我正在尝试创建一个横跨我网页顶部的简单黑盒子。
目前我有这个:
<canvas id="block" align="center" height="250" width="5000"
style="border:1px solid #000000;background:#ffffff;position:absolute;top:-100px;z-index:10;">
最初我尝试将其设为百分比,但对我来说这太复杂了。
我需要阻止该框导致页面滚动到两侧。
我确定这是一件非常简单的事情,可能我遇到的主要问题是不知道要搜索什么。 我现在谷歌搜索了2个小时。
答案 0 :(得分:0)
哟可以简单地使用overflow:hidden
例如:
<div style="overflow:hidden; width:200px; height:200px;position:relative;"></div>
观看演示:jsFiddle Live Demo
答案 1 :(得分:0)
我正在尝试创建一个横跨我网页顶部的简单黑盒子。
如果您正在尝试完成此操作,那么您需要做的就是:
<div style="background-color:#000;height:10px;width:100%;"></div>
并将其直接放在您的<body>
标记下。
我很困惑为什么要在画布上设置width:5000px;
,如果您希望画布元素比视口宽,但仍然不允许滚动,那么您需要设置正文元素上的overflow:hidden
。
body {
overflow:hidden;
}
答案 2 :(得分:-1)
如果不必要的滚动是由于用户在您的应用程序中按箭头键,那么您应该通过执行以下操作告诉浏览器您自己处理箭头键:
event.preventDefault();
在键盘事件的处理程序中。
另外html {overflow: hidden}
也可能有用。