How to make div Scrollable using Javascript

问题

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.

回答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

回答2:

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.

回答3:

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

回答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!

来源：https://stackoverflow.com/questions/16580512/how-to-make-div-scrollable-using-javascript

标签

javascript

html5

tizen

tizen-web-app