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.

What kind of device is it? On iOS devices, for example, there seems to be no way to force the displaying of scroll bars. You have to indicate it with something else or choose a different design solution. — zengabor, May 16 '13 at 06:43
one more thing...maybe...https://developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.appprogramming%2Fhtml%2Fguide%2Fui_guide%2Fui_framework_scrollview.htm — fnostro, May 16 '13 at 06:50

fnostro · Accepted Answer · 2013-05-16T06:53:42.563

7

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

edited May 16 '13 at 06:53

answered May 16 '13 at 06:40

fnostro

4,531
1
15
23

I also used it but it shows scrolls in my software html view but not on device. I mentioned it above in my question – User42590 May 16 '13 at 06:41
`try overflow-x:none; overflow-y:auto;` – fnostro May 16 '13 at 06:42
And i am telling that with auto or scroll its not working on device – User42590 May 16 '13 at 06:43
the link leads to a 404. – z0rberg's Oct 03 '18 at 14:27
well, that's the internet for you. To be fair this *is* a 5 year old answer. – fnostro Oct 03 '18 at 16:59

score 1 · Answer 2 · answered May 16 '13 at 07:06

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.

score 0 · Answer 3 · answered May 16 '13 at 07:18

0

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

answered May 16 '13 at 07:18

shyam.y

1,441
1
16
17

score 0 · Answer 4 · answered Nov 07 '15 at 13:30

0

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!

answered Nov 07 '15 at 13:30

Nair

71
1
14

How to make div Scrollable using Javascript

4 Answers4

Linked