如何根据DIV的宽度自动滚动div中的文本
[英]How to auto scroll text within div depending on width of DIV
问题描述
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 我不需要任何滚动条..我想要像选框一样的功能
5 个解决方案
解决方案1
1 2013-05-23 04:47:47
One Simple method will be adding overflow in the CSS class: 一种简单的方法是在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
解决方案2
0 2013-05-23 04:47:19
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 要使其取决于内容大小，请滚动->自动
解决方案3
0 2013-05-23 04:47:47
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 */
解决方案4
0 2013-05-23 05:21:22
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>
解决方案5
0 2013-10-07 01:30:43
Here's one example that uses strictly CSS to horizontally auto-scroll as an area with a fixed width is populated. 这是一个示例，该示例使用严格的CSS在宽度固定的区域进行水平自动滚动。 No scroll bars are used or rendered. 没有使用或渲染滚动条。 A few things to note here: 这里需要注意的几件事：
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? 当您说要自动滚动时，是否表示要在将内容添加到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.
此处的滚动不使用JavaScript，但当然需要一些脚本来填充要滚动的div。 I've only tested this in Firefox and Chrome.
我仅在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>
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. 只要您向div中添加文本，并且只希望在添加文本时向右滚动，效果就很好。 If you want it to automatically scroll left and right, then you'll need JavaScript to automatically zig-zag the position of "#scrollcontent". 如果要使其自动左右滚动，则需要JavaScript自动将“ #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. 您需要一种算法来获取父跨度的宽度（在这种情况下为“ #scrollbox”），从子跨度的宽度中减去该宽度（“ #scrollcontent”），并在零和该减法结果之间振荡一个数字。 The x position of the child span would be set to the negative of that number. 子跨度的x位置将设置为该数字的负数。 Note that you would need to give "scrollcontent" an absolute position, and remove the float: right attribute. 请注意，您需要给“ scrollcontent”一个绝对位置，然后删除float：right属性。 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. 您还需要为“ scrollbox”指定position属性，否则scrollcontent的绝对位置将相对于确实明确定义了位置的下一个父对象，而不是scrollbox本身。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.