0

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

}

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

4

5 回答 5

1

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

overflow: scroll;

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

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

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

和

overflow-x:scroll; // For horizontal scroll bar
于 2013-05-23T04:47:47.780 回答
0

你可以这样

用于水平滚动

溢出-x：滚动；

用于垂直滚动

溢出-y：滚动；

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

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

要使其取决于内容大小，请滚动->自动

于 2013-05-23T04:47:19.270 回答
0

添加

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 */
于 2013-05-23T04:47:47.357 回答
0

这是静态文本的代码，您需要根据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>
于 2013-05-23T05:21:22.580 回答
0

这是一个示例，它使用严格的 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 属性。您还需要为“滚动框”指定位置属性，

于 2013-10-07T01:30:43.363 回答