CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
samturner
samturner

Reputation: 2223

Angular JS disable touch scroll except on certain elements

I'm building a web application for deployment on an iPad and we're looking for an approach that will disable scrolling on the entire view, except for certain divs. Ideally it would be great to be able to apply a scroll class or something to the div and only permit the scroll classes to scroll.

What should the Angular approach be here? I've seen a variety of JQuery and pure Javascript approaches across the web but all of them seem pretty messy and not necessarily bullet proof.

Upvotes: 0

Views: 746

Answers (1)

jcc
jcc

Reputation: 1147

An option is to determine the height of the device window (allowing you to use any deivce/pc) and setting the max-height of your div in ng-style.

$scope.windowHeight = $window.innerHeight; //might need to subtract 30 pixels for side scrollbar if needed.
$scope.innerDivHeight = Math.ceil($scope.windowHeight / 3) //Whatever scale you want your inner divs to be.

then

<div class="container" ng-style="{'max-height': windowHeight+'px', 'overflow':'none'}">
    <div class="innerDiv" ng-style="{'max-height': innerDivHeight+'px', 'overflow':'auto'}">
    </div>
</div>

You will probably have to fudge with it a bit, but this way it will work for both desktops and iPads the same, without introducing platform specific requirements. Notice the overflow none for do not scroll, and auto for yes, do scroll within this div if it exceeds the height.

Like I said, this may not be exactly what you are looking for, but you do not need any extra complexity to do this.

Upvotes: 1

Related Questions