Question

我有固定宽度的div。我想自动滚动（lefta nd right：Hirizontal direction）文本如果div的内容超过div宽度。我怎么能这样想css或jquery.Currently 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;

}

我不需要任何滚动条..我希望它像一个像字幕一样的功能

Answer 1

一种简单的方法是在 CSS 类中添加溢出：

overflow: scroll;

这将使div在水平和垂直方向都可滚动。

如果您只想向一个方向滚动，那么您应该尝试：

overflow-y:scroll; // For vertical scroll bar

和

overflow-x:scroll; // For horizontal scroll bar

Answer 2

你可以这样

用于给出水平滚动

<强>溢出 - X：滚动;

用于给出垂直滚动

<强>溢出-γ：滚动;

两侧都有滚动溢出：滚动;

从上面的css默认滚动将不会取决于内容大小

要使其依赖于内容大小make scroll - ＆gt;自动

Answer 3

添加

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 */

Answer 4

以下是静态文本的代码，您需要根据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>

Answer 5

这是一个使用严格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本身。

如何根据DIV的宽度自动滚动div中的文本

5 个答案: