[英]How to auto scroll text within div depending on width of DIV
我有固定宽度的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;
}
我不需要任何滚动条..我想要像选框一样的功能
一种简单的方法是在CSS类中添加溢出:
overflow: scroll;
这将使div在水平和垂直方向均可滚动。
如果只想向一个方向滚动,则应尝试:
overflow-y:scroll; // For vertical scroll bar
和
overflow-x:scroll; // For horizontal scroll bar
你可以有这样的
用于水平滚动
溢出-x:滚动;
用于垂直滚动
溢出-y:滚动;
用于在两侧溢出时进行滚动:
从上面的CSS默认滚动会来,它不会取决于内容的大小
要使其取决于内容大小,请滚动->自动
加
overflow: auto; /* scroll bars appear, only when they are needed */
要么
overflow: scroll; /* scroll bars appear (both horizontal and vertical, even when not needed */
还有其他编码溢出的方法,尤其是当您希望显示特定的滚动条时。 但是,较旧的浏览器(IE8和更早版本)并未广泛支持这些功能。
overflow-x: scroll; /* only horizontal scroll bar */
overflow-y: scroll; /* only vertical scroll bar */
这是静态文本的代码,您需要根据div中的文本指定宽度:
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:
<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>
这是一个示例,该示例使用严格的CSS在宽度固定的区域进行水平自动滚动。 没有使用或渲染滚动条。 这里需要注意的几件事:
您的问题有点模棱两可。 当您说要自动滚动时,是否表示要在将内容添加到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>
只要您向div中添加文本,并且只希望在添加文本时向右滚动,效果就很好。 如果要使其自动左右滚动,则需要JavaScript自动将“ #scrollcontent”的位置曲折。 您需要一种算法来获取父跨度的宽度(在这种情况下为“ #scrollbox”),从子跨度的宽度中减去该宽度(“ #scrollcontent”),并在零和该减法结果之间振荡一个数字。 子跨度的x位置将设置为该数字的负数。 请注意,您需要给“ scrollcontent”一个绝对位置,然后删除float:right属性。 您还需要为“ scrollbox”指定position属性,否则scrollcontent的绝对位置将相对于确实明确定义了位置的下一个父对象,而不是scrollbox本身。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.