Scrolling 2 elements independently?

ionic-v1
1

Let’s say I have a content element as the main panel of a split menu and I’m using a 2 column grid within it. The left column has a list in it and the right column is basically a detail panel with a long form that needs to scroll. How can I make the 2 columns scroll independently from one another? Here is a layout example. Would it be possible to get an example in the documentation? This seems like a pretty common master/detail layout that might help a lot of others developing for tablets. I tried using the scroll directive but it looks like a height needs to be set on it in order for it not to automatically bounce to the top which doesn’t let you tap on off screen items. I can’t see how that would scale well to different screen sizes either. Is there a better way to go about it?

<content scroll="false"><!-- Don't want the entire view scrolling at once -->
<div class="row">
    <div class="col-33">
    	<!-- Long list needs to scroll independently of second col -->
    	<list>
    		<item>Item 1</item>
    		<item>Item 2</item>
    	</list>
    </div>
    <div class="col-67">
    	<form>
    		<!-- -Long form needs to scroll independently of first col -->
    	</form>
    </div>
</div>
2

Try this (untested) :

<content scroll="false"><!-- Don't want the entire view scrolling at once -->
<div class="row">
    <div class="col-33">
    	<!-- Long list needs to scroll independently of second col -->
    	<list>
    		<scroll direction="y">
	    		<item>Item 1</item>
	    		<item>Item 2</item>
    		</scroll>
    	</list>
    </div>
    <div class="col-67">
    	<form>
    		<scroll direction="y">
    		<!-- -Long form needs to scroll independently of first col -->
    		</scroll>
    	</form>
    </div>
</div>
3

I tried the above snippet. I’m unable to just apply scroll to the list instead of the entire content. But the list doesn’t scroll properly, it just scrolls through the first few elements.
Snippet :

<content has-header="true" padding="true" scroll="false">
    <button class="button button-block button-positive" ng-click="getMeCarMakes();">
      Get Car Makers
    </button>
    <ul class="list">
      <scroll direction="y">
        <li ng-repeat="data in carMakes" class="item item-icon-left">
          <a>          
            <img src="img/{{data.countryFlag}}" class="icon">
            <h2 class="nameInList">{{data.name}}</h2>
          </a>  
        </li>
      </scroll>      
    </ul>    
  </content>

When I check the markup, below my <ul> , I see the following markup :

<div class="scroll-view ng-isolate-scope" direction="y">

If I add height to this, I’m able to achieve scrolling through the entire list.

4

Can you set up a demo on Plunker or Codepen? It’s hard to visualize and troubleshoot otherwise.

5

http://cdpn.io/ycjgt

I haven’t made a full fledged pen, but the one I have put up probably illustrates the scenario.
If you see the list, it has items till 20, but I’m not able to scroll beyond 5 or 6. It jumps back to the top of the list automatically.

6

The problem isn’t with the <scroll>. It is with the app sizing. If you make the scroller have a specific height smaller than the window size, it scrolls properly.

See : http://codepen.io/calendee/pen/Lsxor

I’m not sure why this is happening. I’ve tried lots of things like using device-height in the meta tag, but none of that works. You may want to open an issue on GitHub.

1 Like
7

Yea, even I was able to get it working by setting the height manually. Thanks though.

8

I have opened the issue on github. I have achieved a temporary solution. Here’s the link to the updated codepen : http://codepen.io/kazekagegaara/pen/ycjgt

9

I had the same requirements and experienced the same problem.

I took a different approach. I inserted the fixed portion of my view between the header and content elements, set scroll=“true” on the content element, and styled the content element with top=“my fixed content + header height”.

It’s probably not a better approach and arguably even more hackinsh. But this is what I did and it worked for me. I will adjust once the “issue” is resolved.