How to make div Scrollable using Javascript

Question

I am working on Tizen and making web app.

I have a div in html5 and I set and image as background on this div. Now i have some scenario in which I have to show some random text in this div multiple times. It is no guaranteed that text always be the same size. My image size is 300 width and 90 height.

Now I want to set my div scroll in up and down direction through javascript whenever my text is larger. I tried scrollTop, overflow: auto/scroll but its not working.

Actually I can see result on HTML view in eclipse but when I run my code on device its not showing any scrollbars. Any help would be appreciated .

Here is my code in which I have a div named textView:

  <div id="textView" style="height: 90px; width: 300px;  
    margin-left: 20px; margin-top: 20px;overflow: auto;">
  </div>

And in javascript:

  var elem = document.getElementById("textView");

  elem.scrollTop="80px";

  elem.innerHTML="llllllllllllllllllllllllllllllllllllllllll"+'<br/>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'<br/>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'</br>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'<br/>';
  elem.style.color = "White";

  elem.style.fontSize = "50px";

I want to show text in image bounds not out of bounds of image.

Answer 1

I believe id you style it to overflow:scroll that should take care of it.

EDIT:

Look at setting overflow-x:hidden and overflow-y:auto

YET ANOTHER EDIT: Perhaps this: https://developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.appprogramming%2Fhtml%2Fguide%2Fui_guide%2Fui_framework_scrollview.htm

Answer 2

i used iscroll for scrolling in my mobile app,Hope it may help you

Answer 3

Try this :- First fix the height and width of the <div> then set the overflow:auto .

document.getElementById("textView").setAttribute("style","overflow:auto;height:90px;width:500px");

or you can try

document.getElementById("textView").style.width='500px';

document.getElementById("textView").style.height='90px';

document.getElementById("textView").style.overflow='auto';

Hope it will help you.

Answer 4

I've experienced similiar problem when I was developing an ap in tizen.Overflow scroll for both axis didn't do the trick.The prob was contents was of fixed position and it didn't belonged to the scrollable division.Check that mate!