javascript 如何根据 DIV 的宽度在 div 内自动滚动文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16705799/
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 auto scroll text within div depending on width of DIV
提问by vmb
I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..
我有固定宽度的 div。如果 div 的内容超过 div 宽度，我想自动滚动（向左和向右：水平方向）文本。我怎么能想到 css 或 jquery。目前 div 有一个这样的类。 .
.divcon{
margin:0px;
padding:0px;
height:30px;
width:143px;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
float:left;
}
}
i dont need any scroll bar..i want it like a marquee like feature
我不需要任何滚动条..我想要它像一个选框一样的功能
回答by Subedi Kishor
One Simple method will be adding overflow in the CSSclass:
一种简单的方法是在CSS类中添加溢出：
overflow: scroll;
This will make div scrollable both in horizontal and vertical.
这将使 div 可在水平和垂直方向滚动。
If you want scroll in one direction only, then you should try:
如果您只想向一个方向滚动，那么您应该尝试：
overflow-y:scroll; // For vertical scroll bar
And
和
overflow-x:scroll; // For horizontal scroll bar
回答by Sukhpreet
Here is the code for static text, you need to give the width according to text inside the div:
这是静态文本的代码，您需要根据 div 内的文本给出宽度：
CSS:
CSS：
.divcon-outer{
width:143px;
}
.divcon{
margin:0px;
padding:0px;
max-height:45px;
width:auto;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
overflow-x: auto;
overflow-y: hidden;
}
.divcon p{
min-width:200px;
max-width:50000px;
margin:0;
padding:0;
}
HTML:
HTML：
<div class="divcon-outer">
<div class="divcon"><p>I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..</p></div></div>
回答by Jacob Ewing
Here's one example that uses strictly CSS to horizontally auto-scroll as an area with a fixed width is populated. No scroll bars are used or rendered. A few things to note here:
这是一个示例，它严格使用 CSS 来水平自动滚动，因为填充了具有固定宽度的区域。不使用或呈现滚动条。这里有几点需要注意：
Your question is a bit ambiguous. When you say you want it to auto-scroll, do you mean that you want the content to scroll by as it's added to the div? Do you mean you want it to repeatedly scroll over the same text? Or perhaps something else? I'm assuming here that you're requesting the first option.
The scrolling here uses no JavaScript, but of course some script is needed to populate the div that's being scrolled.
I've only tested this in Firefox and Chrome.
你的问题有点模棱两可。当你说你想让它自动滚动时，你的意思是你想让内容在添加到 div 时滚动？你的意思是你想让它重复滚动相同的文本吗？或者也许是别的什么？我在这里假设您要求第一个选项。
这里的滚动不使用 JavaScript，但当然需要一些脚本来填充正在滚动的 div。
我只在 Firefox 和 Chrome 中测试过。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> #scrollbox{ display: inline-block; width: 16em; overflow: hidden; border: 1px solid #F00; } #scrollcontent{ float:right; white-space: nowrap; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> var idx = 0; $(document).ready(function(){ setInterval(function(){ idx++; $('#scrollcontent').append('foo_' + idx + " "); }, 200); }) </script> </head> <body> <span id="scrollbox"> <span id="scrollcontent"></span> </span> </body> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> #scrollbox{ display: inline-block; width: 16em; overflow: hidden; border: 1px solid #F00; } #scrollcontent{ float:right; white-space: nowrap; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> var idx = 0; $(document).ready(function(){ setInterval(function(){ idx++; $('#scrollcontent').append('foo_' + idx + " "); }, 200); }) </script> </head> <body> <span id="scrollbox"> <span id="scrollcontent"></span> </span> </body> </html>
That works nicely as long as you're adding text to the div and only wish for it to scroll rightwards as the text is added. If you want it to automatically scroll left and right, then you'll need JavaScript to automatically zig-zag the position of "#scrollcontent". You would need an algorithm that gets the width of the parent span ("#scrollbox" in this case), subtracts that from the width of the child span ("#scrollcontent") and oscillates a number between zero and the result of that subtraction. The x position of the child span would be set to the negative of that number. Note that you would need to give "scrollcontent" an absolute position, and remove the float: right attribute. You would also need to specify the position attribute for "scrollbox", otherwise the absolute position of scrollcontent would be relative the next parent that does have the positioning explicitly defined, rather than scrollbox itself.
只要您将文本添加到 div 并且只希望它在添加文本时向右滚动，这就会很好地工作。如果你想让它自动左右滚动，那么你需要 JavaScript 来自动调整“#scrollcontent”的位置。您需要一个算法来获取父跨度的宽度（在这种情况下为“#scrollbox”），从子跨度（“#scrollcontent”）的宽度中减去该宽度，并在零和减法结果之间振荡一个数字. 子跨度的 x 位置将设置为该数字的负数。请注意，您需要给“scrollcontent”一个绝对位置，并删除 float: right 属性。您还需要为“滚动框”指定位置属性，
回答by coolmove
you can have like this
你可以有这样的
for giving horizontal scroll
用于提供水平滚动
overflow-x:scroll;
溢出-x：滚动；
for giving vertical scroll
用于提供垂直滚动
overflow-y:scroll;
溢出-y：滚动；
for giving scroll on both side overflow:scroll;
用于在两侧进行滚动溢出：滚动；
From above css default scroll will come it will not depend on the content size
从上面的 css 默认滚动会来，它不依赖于内容大小
To make it depend on the content size make scroll --> auto
为了使其取决于内容大小，滚动 --> 自动
回答by pau
Add
添加
overflow: auto; /* scroll bars appear, only when they are needed */
or
或者
overflow: scroll; /* scroll bars appear (both horizontal and vertical, even when not needed */
There are also other ways of coding overflow, especially if you want a specific scroll bar to appear. Although, these are not widely supported by older browsers (IE8 and earlier).
还有其他编码溢出的方法，特别是如果您希望出现特定的滚动条。尽管如此，旧浏览器（IE8 及更早版本）并未广泛支持这些。
overflow-x: scroll; /* only horizontal scroll bar */
overflow-y: scroll; /* only vertical scroll bar */
