如何使用Javascript使div可滚动

时间:2013-05-16 06:34:43

标签: javascript html5 tizen tizen-web-app

  

我正在开发Tizen并制作网络应用。

我在html5中有一个div,我在这个div上设置并将图像作为背景。现在我有一些场景,我必须多次在这个div中显示一些随机文本。无法保证文本的大小始终相同。我的图像尺寸为300宽度和90高度。

现在我想在文字较大时通过javascript在上下方向设置div滚动。我试过scrollTop,溢出:自动/滚动,但它无法正常工作。

实际上我可以在eclipse中看到HTML视图的结果但是当我在设备上运行我的代码时它没有显示任何滚动条。任何帮助将不胜感激。

  

这是我的代码,其中有一个名为textView的div:

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

在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";
  

我希望在图像范围内显示不超出图像范围的文本。

4 个答案:

答案 0 :(得分:4)

我相信你将它设为overflow:scroll的样式,应该照顾它。

编辑:

查看设置overflow-x:hiddenoverflow-y:auto

另一个编辑: 也许这个:https://developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.appprogramming%2Fhtml%2Fguide%2Fui_guide%2Fui_framework_scrollview.htm

答案 1 :(得分:0)

试试这个: - 首先修复<div>的高度和宽度,然后设置overflow:auto

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

或者你可以尝试

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

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

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

希望它会对你有所帮助。

答案 2 :(得分:0)

我使用iscroll在我的移动应用中滚动,希望它可以帮助你

答案 3 :(得分:0)

当我在tizen中开发一个ap时,我遇到了类似的问题。两个轴的流动滚动都没有做到这一点。问题是内容是固定位置的,并没有属于到可滚动的部门。检查那个伙伴!