Page scrolls once the div scroll reaches its end

Question

When running my app/webpage on my phone I want the page to not scroll vertically but I do want the div to allow vertical scroll. This works, however once the div reaches the bottom of the scroll it scrolls the whole page.

The code Im using to disable vertical page scrolling:

 $(document).bind('touchmove', function (e) {
     if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});

my div generator can append any number of divs inside the div that I want to scroll:

      $('#mySelect').append("<div style = 'width:100%; height: 30%; text-align: left; background-color: white; border: 1px solid gray; line-height: 0%' >" +
     "<div style = 'float: left; margin-left: 5%'><p style = ' font-size:" +fontSize+"'>" + username + "</p><p style = 'color: gray; font-size:" +subtext+"'>" +wholeName+"</p></div>    <img style = 'float: right; padding-top: 3%; padding-right: 3%; right: 0; height: 80%;' onclick = addFriend('"+username+"') src = 'addfriend.png'></div>");

being appended to the div:

 <div id="mySelect" class = "scrollable">
 </div>

So pretty much I need to know how to stop vertical scrolling once my "scrollable" div reaches top or bottom. Thanks for any help.

EDIT: I should have specified this is an appmobi/xdk app that is rendered through html. so its not technically in a browser its just the screens viewport.

It seems this is more of a device issue than a layout one. Try a different browser maybe? — This company is turning evil., Oct 21 '13 at 23:40

score 1 · Answer 1 · edited May 23 '17 at 12:10

1

What if you added this css to your document, so there's nothing to scroll vertical to?

html,body{height:100%;overflow-y:hidden}

here's an example fiddle: http://jsfiddle.net/filever10/XEvGP/

it's untested, so let me know if there're any probs.

NEW APPROACH okay, so it's the browser movement...

This should help if it's ios

document.ontouchmove and scrolling on iOS 5

edited May 23 '17 at 12:10

Community

1
1

answered Oct 21 '13 at 23:47

FiLeVeR10

2,155
1
12
13

1

Its the whole "browser" moving, I should have specified this is an appmobi/xdk app that is rendered through html. so its not technically in a browser its just the screens viewport. – DasBeasto Oct 22 '13 at 00:35
1

Right now Im using it on iphone. Im running it through "App Lab" a program that lets it run as if it has already been translated into native ios code and is running without a browser. – DasBeasto Oct 22 '13 at 01:16
cool, they changed it from ios 4 to 5, and i updated the original answer with a link with a marked answer for how it's done on ios 5. – FiLeVeR10 Oct 22 '13 at 01:17

score 0 · Answer 2 · answered Apr 22 '21 at 18:45

0

Try adding overscroll-behavior: contain.

answered Apr 22 '21 at 18:45

Green

486
2
11
31

Page scrolls once the div scroll reaches its end

2 Answers2