CODEWITHSUNDEEP
javascripthtmlcssandroid-webview
Jon
Jon

Reputation: 1850

Prevent vertical scrolling beyond div

I am working on an Android app that makes use of HTML in a WebView.

I have a series of <div>s in my HTML. 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? 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?

I am open to any plain JavaScript, CSS, or HTML implementation. 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.

Upvotes: 1

Views: 2743

Answers (1)

DanielX2010
DanielX2010

Reputation: 1908

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:hidden;
}

Another way to solve it would be to set your bottomdiv to hidden, either by using visibility:hidden; if you want it to take no space or using display:hidden; if you want it not to take any space. Than, just change it with javascript according to what you want to do.

Upvotes: 1

Related Questions