防止垂直滚动超出div

Question

I am working on an Android app that makes use of HTML in a WebView . 我正在使用在WebView使用HTML的Android应用程序。

I have a series of <div> s in my HTML. 我的HTML中有一系列<div> 。 Something like this: 像这样：

<body>

<div id='topdiv'></div>

<div id='contentdiv'>

<p>A bunch of content in here!<p>

<p>There is more content here than can fit on 1 screen.<p>

</div>

<div id='bottomdiv'></div>

</body>

Is there a way to make it so that bottomdiv or topdiv is rendered, but not scrollable? 有没有一种方法可以渲染bottomdiv或topdiv ，但不能滚动？ In other words, is there a way to prevent the user from scrolling down past contentdiv even though bottomdiv exists below it and is not invisible, but contentdiv is always fully scrollable? 换句话说，是否有一种方法可以防止用户向下滚动通过contentdiv即使bottomdiv存在bottomdiv下方并且不可见，但contentdiv始终是完全可滚动的？

I am open to any plain JavaScript, CSS, or HTML implementation. 我愿意接受任何普通的JavaScript，CSS或HTML实现。 It would be nice if that was a feature you could turn on and off, but not necessary. 如果那是您可以打开和关闭的功能，但不是必需的，那就太好了。

Since I am working exclusively on a mobile device, it does not help me to disable the scrollbar or capture mousescroll events and the like. 由于我只在移动设备上工作，因此它无法帮助我禁用滚动条或捕获mousescroll滚动事件等。

Answer 1

If I understand well what you want, the following can solve your problem. 如果我了解您想要什么，以下内容可以解决您的问题。 Use the overflow property on the body tag, like this: 使用body标签上的overflow属性，如下所示：

body
{
overflow:hidden;
}

Another way to solve it would be to set your bottomdiv to hidden , either by using visibility:hidden; 另一种方式来解决这将是你的设置bottomdiv来hidden ，或者通过使用visibility:hidden; if you want it to take no space or using display:hidden; 如果您希望它不占用空间或使用display:hidden; if you want it not to take any space. 如果您希望它不占用任何空间。 Than, just change it with javascript according to what you want to do. 比，只需根据您要执行的javascript更改它即可。

防止垂直滚动超出div

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-12-07 20:33:05

防止垂直滚动超出div

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-12-07 20:33:05

解决方案1
1 已采纳 2012-12-07 20:33:05