如何防止元素导致滚动

时间:2013-03-16 17:54:55

标签: html css html5 scrollbar

我正在尝试创建一个横跨我网页顶部的简单黑盒子。

目前我有这个:

<canvas id="block" align="center" height="250" width="5000" 
style="border:1px solid #000000;background:#ffffff;position:absolute;top:-100px;z-index:10;">

最初我尝试将其设为百分比,但对我来说这太复杂了。

我需要阻止该框导致页面滚动到两侧。

我确定这是一件非常简单的事情,可能我遇到的主要问题是不知道要搜索什么。 我现在谷歌搜索了2个小时。

3 个答案:

答案 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}也可能有用。