如何根据 DIV 的宽度在 div 内自动滚动文本答案

【问题标题】：How to auto scroll text within div depending on width of DIV如何根据 DIV 的宽度在 div 内自动滚动文本
【发布时间】：2013-05-18 07:59:43
【问题描述】：

我有固定宽度的 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;

}

我不需要任何滚动条..我希望它像选框一样的功能

【问题讨论】：

试试：overflow-x: auto; 或 overflow-x: scroll;

标签： javascript jquery css html scroll

【解决方案1】：

你可以拥有这样的

用于水平滚动

溢出-x:scroll;

用于垂直滚动

overflow-y:scroll;

用于在两侧滚动溢出：滚动；

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

根据内容大小制作滚动 --> 自动

【讨论】：

【解决方案2】：

添加

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

【讨论】：

【解决方案3】：

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

overflow: scroll;

这将使 div 可以水平和垂直滚动。

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

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

和

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

【讨论】：

我不需要任何滚动条..我希望它像选框一样的功能
请查看Using CSS Animation 和Auto Scrolling With CSS。
那么你试过了吗，它帮助你解决了你的问题吗？
试过..我不需要任何滚动条..只需自动滚动文本

【解决方案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>

【讨论】：

试试这个javascript for margquee :javascript.about.com/library/blctmarquee1.htm
没有人..我不需要这个..它正在显示滚动条..我想在 div 中滚动文本..不是滚动条..
这在 CSS 中是不可能的，你需要 Javascript。如果它解决了您的问题，请检查上面给出的链接。

【解决方案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 属性。您还需要为“滚动框”指定位置属性，否则滚动内容的绝对位置将是相对于下一个明确定义了定位的父级，而不是滚动框本身。

【讨论】：