0

I have a list in my page,I want the list be scrollble, only the list without all the rest of the page...I using iScroll js file

this is my code:

<div id="ds">
            <div id="rtrt">
    <ul data-role="listview" id="a1"                
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
.
.
.
.
         </ul>
            </div>
</div>

<script type="text/javascript">
 var myScroll;
        function loaded() {
                myScroll = new iScroll('rtrt');
            }

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

But the scroll is over the list on all the window,so i scrolling over all the screen, How can I scroll only the list in the middle of the screen (in mobile).

Any ideas?

Alex Opent
  • 111
  • 1
  • 13
  • Why not an iframe? It would do exactly what are you looking for... http://docs.webplatform.org/wiki/html/elements/iframe – mastazi Nov 27 '12 at 08:56
  • 1
    Or, even better, use this CSS: `overflow:scroll;`. It is not advisable to use Javascript for things that can be just done in HTML/CSS – mastazi Nov 27 '12 at 09:00

2 Answers2

0

Using CSS you can achieve the same result: (300 px of height is just an example, make the div as tall as you like/need):

.rtrt{
height: 300px;
overflow: scroll
}
mastazi
  • 1,623
  • 26
  • 41
0

you can use only html/css and it will work fine without javascript for this you have to made two section first section is fixed in this put that content which you don't want to scroll and in second section put those content which you need to scroll it should be like this

<style type="text/css">
#first-section {
    height:100px;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
#second-section{
    position:absolute;
    top:100px;
    left:0;
    right:0;
    bottom:0;
    overflow:auto;
}
</style>
<div id="first-section"><!--put fixed content here--></div>
<div id="second-section"><!--put scrollable content here--></div>
The Mechanic
  • 2,301
  • 1
  • 26
  • 37
  • Is it works even if the scrollable content is inside the non-scrollable div? in my case it's one in one. – Alex Opent Nov 27 '12 at 12:52
  • actually i didn't get it what you need please tell me clearly – The Mechanic Nov 29 '12 at 13:55
  • I'm building an mobile app with `HTML`, because of the full scroll all over the screen I have some design problem in some devices. What I trying to get is list in the middle of `div`-page.The `list` is building dynamically but it should be `scrollable` only in middle, now when I use `iScroll framework` and implement it on the list, the list scroll's to the header of the page and out of the middle borders. – Alex Opent Dec 01 '12 at 16:43