Html 如何使用 Javascript 使 div 可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16580512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make div Scrollable using Javascript
提问by User42590
I am working on Tizen and making web app.
我正在开发 Tizen 并制作网络应用程序。
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.
我在 html5 中有一个 div，我在这个 div 上设置和图像作为背景。现在我有一些场景，我必须在这个 div 中多次显示一些随机文本。不能保证文本总是相同的大小。我的图像大小是 300 宽和 90 高。
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.
现在我想在文本较大时通过 javascript 设置我的 div 向上和向下滚动。我试过 scrollTop, overflow: auto/scroll 但它不起作用。
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 .
实际上，我可以在 Eclipse 中的 HTML 视图中看到结果，但是当我在设备上运行我的代码时，它没有显示任何滚动条。任何帮助，将不胜感激 。
Here is my code in which I have a div named textView:
这是我的代码，其中有一个名为 textView 的 div：
<div id="textView" style="height: 90px; width: 300px;
margin-left: 20px; margin-top: 20px;overflow: auto;">
</div>
And in javascript:
在 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.
我想在图像边界中显示文本而不是图像边界。
回答by fnostro
I believe id you style it to overflow:scrollthat should take care of it.
我相信你的风格overflow:scroll应该照顾它。
EDIT:
编辑：
Look at setting overflow-x:hiddenand overflow-y:auto
看设置overflow-x:hidden和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
另一个编辑：也许这个：https: //developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.appprogramming%2Fhtml%2Fguide%2Fui_guide%2Fui_framework_scrollview.htm
回答by JDGuide
Try this :- First fix the height and width of the <div>then set the overflow:auto.
试试这个：-首先固定高度和宽度，<div>然后设置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.
希望它会帮助你。
回答by sham.y
回答by Nair
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!
当我在 tizen 中开发 ap 时，我遇到了类似的问题。两个轴的溢出滚动都没有解决问题。问题是内容是固定位置，它不属于可滚动部门。检查那个伙伴！
