如何防止元素滚动

我正在尝试创建一个简单的黑盒子，它跨越了我的网页顶部。如何防止元素滚动

目前我有这样的：

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

起初我试图使其成为百分比，但它太复杂了我。

我需要防止盒子导致页面滚动到两侧。

我确定这是一件非常简单的事情，可能是我遇到的主要问题是不知道要搜索什么。我一直在使用Google搜索2个小时。

来源

2013-03-16 plaguedoctor

你试过了'overflow：hidden;'？ – 2013-03-16 17:56:57

呦可以简单地使用overflow:hidden

例如：

<div style="overflow:hidden; width:200px; height:200px;position:relative;"></div>

观看演示：jsFiddle Live Demo

来源

2013-03-16 18:00:39

只能在画布内部启用溢出（即没有）。 – Kornel 2013-03-16 18:01:38

它没有工作。我甚至在样式“”之前尝试过overflow =“hidden” – plaguedoctor 2013-03-16 18:06:32

@plaguedoctor不能在样式中使用overflow =“hidden”'，因为overflow是一个css属性。你应该像上面的例子一样在'style'属性中用'：'来使用它。 – 2013-03-16 18:10:37

如果不需要滚动是由于您的应用程序用户按下方向键，那么你就应该告诉浏览器你正在处理箭头键自己执行：

event.preventDefault();

在键盘事件的处理程序中。

此外html {overflow: hidden}也可能工作。

来源

2013-03-16 18:01:07 Kornel

我想创建一个简单的黑盒子，跨越我的网页的顶部。

如果你想做到这一点，那么所有你需要做的是：

<div style="background-color:#000;height:10px;width:100%;"></div>

，并直接将其放置在开放<body>标签下。

我很困惑，为什么你在画布上设置width:5000px;，如果你希望做一个画布元素大于视域宽，但仍不能让那么滚动您需要设置overflow:hidden的体元素。

body { 
overflow:hidden; 
}

来源

2013-03-16 18:33:49

画布会动画。它需要能够倾斜而不会在下面的图像上显示角落。 5k比任何可能访问该网站的显示器设置更宽 – plaguedoctor 2013-03-16 18:51:23

您是否想过将画布放在div中，然后将div的溢出设置为隐藏？然后，您可以使画布尽可能大，并且不会显示任何滚动条。只要不要忘记将画布放在div中间。 – Adam11 2013-03-16 23:58:38

如何防止元素滚动

回答

相关问题