CODEWITHSUNDEEP
javascriptjquerycsshtml
DasBeasto
DasBeasto

Reputation: 2282

Page scrolls once the div scroll reaches its end

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.

Upvotes: 1

Views: 1325

Answers (2)

Green
Green

Reputation: 544

Try adding overscroll-behavior: contain.

Upvotes: 0

FiLeVeR10
FiLeVeR10

Reputation: 2165

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

Upvotes: 1

Related Questions