自动滚动和循环内容DIV
是一种常见的前端开发技术，用于实现网页中内容的自动滚动和循环展示。通过该技术，可以让页面上的内容在一定时间间隔内自动滚动，并且在滚动到最后一个内容后，能够无缝地回到第一个内容，实现循环展示的效果。
这种技术通常使用HTML、CSS和JavaScript来实现。下面是一个简单的示例代码：
HTML部分：
<div id="scrollingDiv">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>CSS部分：
#scrollingDiv {
height: 200px;
overflow: hidden;
}
#scrollingDiv ul {
list-style-type: none;
margin: 0;
padding: 0;
animation: scroll 10s infinite;
}
@keyframes scroll {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-50%);
}
50% {
transform: translateY(-100%);
}
75% {
transform: translateY(-150%);
}
100% {
transform: translateY(0);
}
}JavaScript部分：
window.onload = function() {
var scrollingDiv = document.getElementById("scrollingDiv");
var ul = scrollingDiv.querySelector("ul");
var liHeight = ul.querySelector("li").offsetHeight;
var totalHeight = liHeight * ul.children.length;
scrollingDiv.style.height = liHeight + "px";
ul.style.height = totalHeight + "px";
}上述代码中，通过CSS的动画属性animation实现了内容的滚动效果，通过JavaScript计算内容的高度并设置相应的样式，实现了自动滚动和循环展示的效果。
自动滚动和循环内容DIV可以应用于各种需要展示多个内容并自动切换的场景，比如轮播图、新闻滚动、广告展示等。在实际开发中，可以根据具体需求进行样式和动画的定制。
腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括云服务器、云存储、CDN加速等。您可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多相关产品和详细信息。
相关·内容
2回答
固定滚动条位置？
、、、
因此，在我的html文件中，我有一个宽度和高度都很大的div。垂直方向显示为全屏，因此您需要向下滚动整个页面。但是在水平方向上只显示了一半，所以在这个div的底部，我们有一个滚动条，可以在这个div上滚动，而不需要向左或向右滚动整个页面。
问题是，滚动条本身只是放置在div的底部，但我希望它固定在屏幕的底部，这样我就可以向左和向右滚动这个div，而不需要一开始向下滚动。
浏览 1提问于2017-02-02得票数 0
1回答
在html、body和带有图片bg的第一个div中输入height:100%;后，我不能再在IE8中向下滚动页面。滚动条可见，但没有响应。无法使用鼠标滚动或page down键滚动。我必须放入height:100%;，这样div中的图像就会填满整个页面，甚至超过页脚。无法使用body bg，因为IE 8渐变代码。有什么问题的线索吗？然而，滚动在IE9中确实可以工作……
html, body {
height:100%;
color:#423928;
font:normal 13px/18px Arial, Helvetica, sans-serif;
}
.flash-bg {
backg
浏览 0提问于2012-03-16得票数 2
我有jQuery自定义内容滚动器在我的网站内的div。div内容具有参数("#content").hide()。当页面加载时，div是可见的，并且jQuery自定义内容滚动器可以很好地工作。
但是，如果页面加载时div内容不可见，则jQuery自定义内容滚动器不可见且无法工作。我注意到当你缩小或扩大窗口时，滚动体就会显示出来。我在这个网址上有一个小例子：
问题可能在哪里？
浏览 5提问于2012-12-03得票数 5
5回答
我正在尝试创建一个div，它看起来像MS Windows命令提示符。
div是可调整大小的，并且有两个子级:一个标题栏div和一个内容div。
当内容div大于窗口div时，我希望内容div获得滚动条。我希望标题栏总是可见的，而不是滚动，而不是在滚动条顶部。
交互地演示了我的问题。单击内容文本并添加新行。当添加足够多行以使滚动条出现时，它们不会出现。
content具有overflow:auto集。
将内容上的max-height或height设置为100%不起作用，因为100%不考虑标题栏的高度，因此滚动条在某些行离开底部后出现。此外，当滚动条出现时，会模糊外部div上可拖动的拇指
浏览 0提问于2013-08-22得票数 0
回答已采纳
我有一个Div Overflow前置到body容器包装器，当它触发这个前置时，我希望所有由鼠标滚动所做的滚动只在div溢出中工作，它的宽度:窗口的60%。所以我希望我滚动的地方只能在div溢出中工作，因为现在的方式是，当你在div中达到最大滚动时，它开始在背景中滚动身体，而且如果我把鼠标放在div溢出之外，它也会在背景中滚动身体。我该怎么做才能帮上忙呢？我使用的是JQuery库。
另一件事是，我想要添加一个eventListener，当该div的滚动达到某个高度时，它会做一些事情，例如调用javascript函数。
这一切都可能吗？如果是，如何选择？提前谢谢你们。
浏览 0提问于2011-10-05得票数 0
回答已采纳
我正在使用overflow:scroll，就像下面的代码一样，我遇到的问题是，即使没有文本，滚动条也会显示。
在w3schools上演示：你可以看到，即使你不能水平滚动(向左或向右)，仍然会有一个滚动条。我正在尝试让它在滚动条不出现的地方，如果没有东西滚动to.hope，这是有意义的
<style type="text/css">
div.scroll {
background-color: #00FFFF;
width: 100px;
height: 100px;
overflow: scroll;
}
</style
浏览 2提问于2012-04-18得票数 15
回答已采纳
我需要追加文本用户输入到一个固定的宽度和高度div。我设置了div overflow:auto，但我只想显示垂直滚动条，不想看到水平滚动条。如何让文本自动换行来固定div的宽度？
<script>
function Send(){
var text=$("[id$='Text1']").val();
$('#contentDIV').append("me: "+text+"<br />");
}
</script>
浏览 3提问于2011-08-19得票数 1
回答已采纳
1回答
滚动到视图元素隐藏在标题后面
、、、、
我是一个反应应用程序，在点击下面的一个项目，选择框，相应的项目在下一节将被滚动。
上述场景的工作示例：
点击第二项，其各自的字段集将被滚动到顶部。
发行：
->现在的要求是，我需要添加一个标题，在标题下面，这两个部分都需要显示。
->我在容器div中添加了style={{ marginTop: "100px" }}，
<div id="container" style={{ marginTop: "100px" }}>
<div className="_2iA8p44d0WZ">
浏览 0提问于2021-01-19得票数 1
回答已采纳
超人们。我正在使用ajax和jquery将数据加载到表中。这可能会很多，所以我想滚动这个。我已经把表放在了一个div中。现在，我在jquery中构建了一个检查，如下所示：
if($('div#result table').height() > maxHeight)
$('div#result').css('overflow-y', 'scroll');
else
$('div#result').css('overflow-y', 'hidden');
这在fir
浏览 1提问于2011-01-14得票数 4
回答已采纳
1回答
我使用的是2列div布局，其中左右列的宽度都是不确定的。左列div保存一个图像。右列div包含标题div和其下方的文本内容div。左列图像的宽度优先于右列，右列以宽度表示残余物。这两列都在div容器中，该容器具有固定的高度(和宽度，但这并不重要)。此布局使用以下代码工作：
.container {
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.left {
float: left;
}
.right {
overflow: hidden;
}
.scrollable-conten
浏览 6提问于2013-10-29得票数 0
4回答
让我先介绍一下我的代码示例：
<div id="StartScroll"></div>
Many divs and content here !
<div id="EndScroll"></div>
我的问题是，如何制作一个滚动条，从带有id StartScroll的div开始滚动，到带有id EndScroll的div结束滚动。
请注意，在StartScroll之前和EndScroll之后都有内容，但我希望滚动条不应该被允许超出StartScroll和EndScroll。
我该怎么做呢？也许和jQuery
浏览 2提问于2014-12-10得票数 1
我的垂直自动卷轴似乎在某些点不稳定地停止，我想要一个平滑的滚动代替。其次，我希望垂直滚动自动复位(几乎是无限循环，或者给出它的含义永远不会结束，而不仅仅是跳跃)。我该怎么做才能做到这一点？到目前为止，我的代码如下：。
<div id="wrapper">
<ul>
<li><div id='activity_date'>06/11/2012</div></li>
<li><div id='activity_date'>06/11/20
浏览 3提问于2012-11-06得票数 0
回答已采纳
1回答
将可滚动的div粘到屏幕底部
、、、、
我有一个使用jquery，jquery-mobile，iscroll和iscrollview的cordova应用程序
我不太喜欢这些工具。
我已经把jquery-移动页眉/页脚粘在屏幕的顶部和底部了。
在页眉和页脚之间有一个可滚动的div。它将包含可变数量的数据。有时数据将小于div的高度，有时它会更大(因此滚动)。
这是棘手的部分。我想把可滚动div的底部贴在页脚的顶部。当我向div添加内容时，我希望最近添加的内容最接近页脚的顶部，这样滚动div的顶部看起来就像随着数据的增加而向页眉底部向上增长。
一旦滚动div的顶部是按其内容文件，那么我想能够滚动它。
有人能做到这样的事情吗？
浏览 3提问于2015-08-28得票数 0
我想找一个特定的词，由搜索和滚动它使用window.find()如何使用window.find()在一个特定的div，不是所有的页面？
浏览 8提问于2015-12-29得票数 3
2回答
我试图在我的div内建立一个可滚动的区域，就像下面的图像一样。我只希望滚动区域改变高度在不同的屏幕高度和滚动相应。
问题是，如果可滚动的内容足够大，它将使整个页面滚动。如果它很小，页脚将正确地停留在底部。
这是我目前所拥有的
* {
margin: 0;
padding: 0;
width: 100%;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
.header {
height: 30px;
background-color
浏览 3提问于2021-11-28得票数 1
回答已采纳
2回答
HTML元素的位置:绝对对滚动
、、、、
我有两个div，其中position属性设置为absolute。其中一个是另一个可滚动的div的儿子。就像这样：
<body>
<div class="foo" id="outside"></div>
<div class="bar">
<div class="foo" id="inside"></div>
</div>
</body>
在CSS中：
.foo{position:absolute;}
浏览 2提问于2013-09-02得票数 1
回答已采纳
我试图将导航条、面包屑条、表标题等定位为屏幕上的固定元素，但将内容保持在页面的中心可滚动。
当我将大多数元素设置为固定元素时，中心中的内容不会滚动。如果我将导航条设置为固定的，某些元素将滚动，表标题和相关元素将滚动到导航栏后面，而不是固定在屏幕上。我尝试了几个不同的选项，但在保持内容可滚动方面没有任何进展。
下面是演示此问题的示例代码(单击下拉菜单，然后测试菜单项)：
是否有一种方法可以设置屏幕上的元素并启用内容滚动？这是否需要为每个元素创建样式，或者是否可以设置允许在父div级别上滚动的样式？
浏览 3提问于2022-09-12得票数 0
1回答
我有一个带有iframe和菜单结构的htm文件。该菜单可以加载iframe中的htm文件或aspx文件。一点问题都没有。
但是..。现在，他们希望iframe获得其内容的大小。(因此，iframe中将不会有滚动条，但您必须滚动整个htm文件。)
我没有让它工作，所以我想我应该使用div来解决这个问题。但是我无法在div中加载aspx文件。
所以我被卡住了。要么我必须找到让我的iframe增长的方法，要么我必须找到在div中加载aspx文件的方法。
浏览 4提问于2009-01-14得票数 1
2回答
我在以下问题上找不到明确的答案：
我有这个html：
<html>
<head>
<title>Title blabla</title>
</head>
<body>
<div id="gHeader">
</div>
<div id="gBody">
</div>
</body>
</html>
gHeader是标题部分，这是菜单所在的位置，gBody是正文部分，这是其他所有内
浏览 0提问于2012-11-19得票数 2
回答已采纳
1回答
我有一页固定的高度，661 in，在景观模式的iPad上的Safari的高度。在iPad上，我不希望它滚动；内容应该完全适合。
然而，在较高的浏览器窗口上，我希望在661 On折叠下面显示一些额外的内容(版权行)。但是，在窗口小于661 be之前，不应该出现滚动条，也就是说，在滚动条出现之前，应该剪掉页脚。
+--------+ +--------+ +--------+ ^
| | | | | | #
| | | | | | v
+--------+ +-------
浏览 3提问于2012-12-09得票数 4
回答已采纳
我在3D空间旋转一个div。很简单：
<div class="holder">
<div class="box">
<p>This is some text.</p>
</div>
</div>
.box {
background: orange;
color: #fff;
font-size: 6em;
transform: rotateY(60deg);
padding: 20px;
position: absolute;
浏览 0提问于2015-04-09得票数 2
回答已采纳
我想知道是否可以使用jQuery工具中的scrollable来垂直滚动1个项目/分区。目前，我只能让它与至少两个DIVS一起工作。它似乎被设置为一个图片库滚动条，但我想使用它来垂直滚动播放列表，并且会有一个DIV用于播放列表。
如果它必须至少有两个DIV，我想知道我是否可以将第二个DIV设置为高度为1px，或隐藏？目前看来，所有的DIVs都必须具有相同的高度。
谢谢,
尼克。
浏览 0提问于2011-03-25得票数 0
回答已采纳
我正在尝试创建一个在左侧有两个侧边栏的页面(第一个侧边栏中的链接将在第二列中打开更多链接，这将反过来打开内容页面)。我希望两个侧边栏都固定在合适的位置，这样它们就不会滚动，但由于可以显示大量的链接，侧边栏有可能会比大多数人的屏幕尺寸更长。
如何才能使其中一个侧边栏比屏幕高度长，它会与页面的其余部分一起滚动，但当到达侧边栏的末尾时，即使页面的其余内容仍然可以滚动，它也会停止滚动？
我正在尝试实现的一个例子是在Gmail收件箱上，侧边栏通常是静态的，但如果屏幕太小，它可以滚动。
下面是我到目前为止所知道的。两个侧栏栏是leftnavbox和rightnavbox。
非常感谢
<!DOCTYP
浏览 0提问于2012-01-16得票数 2
1回答
我在javascript上为iPad开发了应用程序。我有一些div。这个div中的内容应该是可滚动的。我使用这个类为div添加了滚动：
.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y: scroll !important;
-webkit-transform: translate3d(0, 0, 0);
}
这种方式在90%的情况下有效，但有时我尝试滚动内容，但什么也没有发生。我等待大约3秒，然后再试一次-滚动工作。我没有任何可能导致这种行为的javascript代码。
为什么会有这种行为？
浏览 3提问于2014-03-12得票数 4
我很难想象如何用文字来解释这个问题，所以我做了一个快速的线框草图来解释这个问题。
我正在创建一个webapp，它显示了一长串新闻项目。当有人单击新闻项目时，通过.load()，我将一个.html文件加载到div中，使用CSS-转换，我模拟幻灯片的效果。
但是，由于该div是页面本身的一部分，并且用户在页面上滚动，加载的带有新闻条目本身的div也会被滚动。
查看这个问题的一个活生生的例子，。调整浏览器的大小！
期望解
无论您在概览页面上滚动了多少，当您单击一个项目和.load()并在包含内容的div中滑动时，它应该从顶部开始，而不是同样地滚动。
原型将只为iPhone 6+构建，因此，
浏览 1提问于2015-01-16得票数 0
回答已采纳
我有两个DIVs与已实现的Slim涡旋插件。两者都工作得很好，但其中一个应该一直滚动到<div id="msg_left_sidebar">....</div>上(似乎是默认的)，另一个<div id="chat_content">....</div>则一直向下滚动。它几乎和预期的一样，适用于以下代码：
$(function(){
var scrollDown_int = $('#chat_content')[0].scrollHeight;
$('#msg_left_sid
浏览 5提问于2015-03-01得票数 1
回答已采纳
更新：--我创建了这个来展示我在说什么。这个演示展示了两种方法，第一种是蛮力法，第二种是罗伯特·麦基的方法。
使用第一种方法，按滚动键结束按钮，导出垂直(y)缩放值，然后显示在刚刚按下的按钮旁边。在按钮下面的值列表中，您还将看到完全滚动到滚动区左下角所需的1px滚动的数量，如滚动Y计数和滚动X计数字段所示。现在显示缩放值并选中相邻复选框，按滚动到结束按钮显示，相同数量的1px水平和缩放垂直滚动现在到达滚动区域的右下端。
使用第二种方法，在不需要实际滚动的情况下，按计算Y尺度按钮来计算y刻度值。在计算了这个值之后，第二个俯冲就会被滚动，以显示它是有效的。
第一种方法找到允许滚动的y标度值，这样水
浏览 5提问于2020-03-02得票数 1
回答已采纳
5回答
Colorbox滚动条
、、、、
我有一个在一个lightbox中打开的图像(Colorbox是脚本)。当图像打开时，我添加了一个CSS3动画。效果很好，但一开始，lightbox有滚动条，一旦动画完成，滚动条就会消失。
如何阻止lightbox显示滚动条？
代码：
#start{
/* Width and Height of the Image */
width:526px;
height:450px;
}
<div class="hide">
<div id="start">
<img src="/Images/designs/start
浏览 1提问于2012-10-24得票数 2
回答已采纳
我刚刚在interactjs的vue cli项目上遇到了严重的问题。
最新版本是"interactjs"："^ 1.10.3"，
我在vue 中使用
现在我有了以下问题，在一个虚拟项目中，我有一个组件，可以从其中创建几个多点触摸元素，这些元素可以缩放、旋转、排序.它们都能很好地处理虚拟内容。
在一个实际的项目中，我有一个div，它充当一个可滚动内容的容器，突然这个区域中的拖动不再起作用了。起初，我认为这是因为容器/可拼贴的div组合，但当我移除容器时，问题仍然存在。
当前，当加载到槽中的元素是带有几行文本的文本元素时，就会出现这个问题。使用2-3行它可以在文本上
浏览 5提问于2021-02-10得票数 1
回答已采纳
前言：砌体是一个JQuery插件，它在一个页面上创建一个“砖块式”的html页面布局。无限滚动是一个插件，允许pintrest风格的滚动页面项目.
我在这里安装了w/无穷大卷轴：
我的问题是这个。
我希望将“容器”div定位为页面中所有项目列表的中间位置。
所以我用了这样的代码：
#container {
left:140px; // <---- Positioning
padding:10px;
background: #FFF;
padding: 5px;
margin-bottom: 20px;
border-radius: 5px;
clear
浏览 1提问于2012-09-02得票数 2
2回答
我正在寻找一种简单的方法来在div上水平滚动图像列表，并重复模式(从左到右缓慢移动的图像的无限循环)。
目前使用来完成这个任务，但是它有很多我不需要的功能(比如用户控件和垂直滚动)。我希望有一种简单的方法，只需几十行代码就可以用jQuery编写代码。
我相信我可以构建一些东西来水平滚动图像，但让它们循环起来是我做不到的。
任何帮助，信息，甚至是一个新的脚本(最近更新过的)都是很棒的。谢谢!
浏览 3提问于2011-09-09得票数 0
1回答
我目前有一个水平滚动视差网站的HTML和CSS。然而，我希望当你到达一个特定的部分时，你会得到一个垂直的视差滚动，而不是水平的。
查看这个网站的一个例子： ...你会看到水平滚动突然变成了垂直滚动……
查看这个JSFiddle：
我目前有一个水平滚动的视差，其中嵌套了一个垂直滚动的div……我真的不确定如何让div向上滚动，而不是向下滚动。
这是我在“go-up”div中使用的代码：
#go-up {
background-color:blue;
width:650px;
left:3000px;
overflow-y: scroll;
height:100%;
overflow-x:hidd
浏览 2提问于2013-04-04得票数 2
回答已采纳
2回答
我用过完美的滚动条js插件。滚动条很好用。但是，当我再次为另一个内容(同页)添加这个滚动条时，它不适用于第二个div。如何使用此插件在同一页中添加多个滚动条？
JS
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
});
CSS
#Default.contentHolder { position:relative; margin:0px auto; margin-top: 20px; padding:0px;
浏览 0提问于2014-05-09得票数 3
回答已采纳
我正在使用jQueryUI对话框中的jQueryUI选项卡。每个选项卡面板中的内容可能非常大--例如，每个选项卡面板中可能有一个包含数百行的表。因此需要使用滚动条来导航内容。
默认情况下，对话框面板显示自己的滚动条--这并不是我想要的。此滚动条使导航选项卡本身向上移动和移出视图。我更喜欢让每个选项卡面板在必要时显示自己的滚动条，但让导航选项卡保持可见。我尝试为对话框面板设置"overflow:hidden“，然后为各个选项卡面板设置"overflow:auto”(如下所示)。但是，即使内容需要，选项卡面板也不会获得滚动条。
下面是一个显示问题的(简化的)测试用例--包括我尝试使
浏览 3提问于2011-09-11得票数 2
回答已采纳
1回答
可滚动的固定div布局？
、、、
我试图获得3个水平固定位置静态宽度div元素是可滚动的，如果浏览器的大小太小。现在，如果浏览器的大小缩小到小于这3个div的总宽度，那么就没有水平或垂直滚动。
注意，左窗格和右窗格不应该移动，只有中间窗格在垂直滚动时才能滚动。
图像示例：
下面是我的左、中、右窗格的CSS，顺序如下：
#webcto_menu {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
background-image:url(../images/webcto_120.png);
background-re
浏览 4提问于2012-11-09得票数 0
2回答
我试图使用以下代码将内容插入到水平滚动div中：
<div id="scrolly">
<div id="chartdiv_hourly" class="vh72" style="width:200%;">
</div>
</div>
#scrolly{
width: auto;
overflow: auto;
height: auto;
white-space: now
浏览 4提问于2014-10-26得票数 0
我有一个滚动，应该是填充页面的可见区域：
<div id=allcontent style="width:100%;height:100%;overflow:scroll">
(all page content)
</div>
当我放大ctrl+ IE11时，我的div的右侧下方有额外的空间，在这里我看到了背景色。
我希望调整"allcontent“div的大小，以便在IE放大时填充页面，但我无法找到使用javascript获取实际页面大小的方法。
是否有：
一种从IE11获取真实页面大小的方法--单击ctrl+，或
指定CSS中的
浏览 2提问于2015-01-04得票数 0
2回答
我将两个脚本组合在一起:一个滚动条和一个内容推动器。当我交换内容(淡入淡出)时，div中的大量内容会使滚动的div变得超长。我在内容滚动()的插件演示中看到，当加载不同的内容时，你可以使用$(selector).mCustomScrollbar("update");来相应地调整div。
我知道这些代码需要放到我的淡出脚本中的某个地方，但是在哪里呢？这里是淡入淡出的脚本，它会去哪里？
<script type='text/javascript'>//<
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
