首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有可能创建一个相同的html元素的无限循环,从顶部滚动到底部,具有类似门户的效果?

是的,可以通过CSS和JavaScript来实现一个相同的HTML元素的无限循环滚动效果,类似门户的效果。以下是一种实现方式:

  1. 首先,在HTML中创建一个包含相同HTML元素的容器,例如一个div元素,设置其高度为容器可视区域的高度,同时设置overflow为hidden,以隐藏超出容器高度的内容。
  2. 在CSS中,设置相同HTML元素的样式,包括宽度、高度、边距等。
  3. 使用JavaScript来实现滚动效果。首先,获取容器元素和相同HTML元素的高度。然后,使用定时器或requestAnimationFrame函数来不断改变容器元素的scrollTop属性,使其逐渐增加。当scrollTop达到相同HTML元素的高度时,将scrollTop重置为0,从而实现无限循环滚动效果。

这种方式可以创建一个类似门户的效果,让相同的HTML元素在容器中无限循环滚动,从顶部滚动到底部。

以下是一个示例代码:

HTML:

代码语言:txt
复制
<div id="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
  <!-- 更多相同的HTML元素 -->
</div>

CSS:

代码语言:txt
复制
#container {
  height: 300px; /* 容器可视区域的高度 */
  overflow: hidden;
}

.item {
  height: 100px; /* 相同HTML元素的高度 */
  /* 其他样式设置 */
}

JavaScript:

代码语言:txt
复制
var container = document.getElementById('container');
var itemHeight = document.querySelector('.item').offsetHeight;
var scrollTop = 0;

function scroll() {
  scrollTop++;
  container.scrollTop = scrollTop;

  if (scrollTop >= itemHeight) {
    scrollTop = 0;
    container.scrollTop = 0;
  }

  requestAnimationFrame(scroll);
}

scroll();

这样,就可以实现一个具有类似门户的效果,无限循环滚动相同的HTML元素。在实际应用中,可以根据具体需求进行样式和动画的定制。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

,但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部padding,当我们要设置一个固定在顶部菜单、导航、元素等时使用...// paddingTop: "100px", // //设置每个section底部padding,当我们要设置一个固定在底部菜单、导航、元素等时使用 //...,但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部padding,当我们要设置一个固定在顶部菜单、导航、元素等时使用...// paddingTop: "100px", // //设置每个section底部padding,当我们要设置一个固定在底部菜单、导航、元素等时使用 //...html元素还在;如果使用all,则样式和html等全部被销毁 // destroy(type); // //重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果 // reBuild

11.9K30

Interection Observer如何观察变化

你可以使用类似10px 15px 20px值,这使我们顶部边距为10px,左侧和右侧边距为15px,底部边距为20px。仅边界框受影响,元素本身不受影响。...在观察者包含多个目标的情况下,这是确定哪个目标元素触发了此相交更改简便方法。 time属性提供首次创建观察者触发此交集改变时间(以毫秒为单位)。...我只想大致了解两者之间性能差异,为此我创建了三个简单测试。 首先,我创建一个样本HTML文件,该文件包含一百个设置了高度div,以此创建一个滚动页面。...把页面放在静态服务器上,然后我用Puppeteer加载了HTML文件,启动了跟踪,让页面以预设增量向下滚动底部,一旦到达底部,就停止了跟踪,最后保存跟踪结果。...逻辑上讲,如果目标不在顶部,则它必须在底部。如果比率恰好等于1,则它在根元素“内部”。除了使用left或right属性检查水平位置外,其他检查方法相同

2.6K20
  • 【总结】1823- 移动端滚动穿透与滚动溢出解决方案

    滚动穿透 问题描述 在移动端 WEB 开发时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滚动,看起来好像事件穿透下面的...问题描述 如上录屏所示,弹窗内也含有滚动元素,在滚动元素滚到底部顶部时,再往下或往上滚动,也会触发页面的滚动,这种现象称之为滚动链(scroll chaining), 但是感觉滚动溢出(overscroll...值 描述 auto 默认效果元素滚动可以传播到祖先元素。 contain 阻止滚动链,滚动不会传播到祖先元素,但是会显示节点自身局部效果。...例如 Android 上过度滚动发光效果或 iOS 上橡皮筋效果。 none 与 contain 相同,但是会阻止自身过度效果。...✅ 解决方案B (event.preventDefault) 借用 event.preventDefault 能力,当组件滚动底部顶部时,通过调用 event.preventDefault 阻止所有滚动

    56711

    【Python爬虫实战】全面掌握 Selenium IFrame 切换、动作链操作与页面滚动技巧

    一、切换IFrame 在使用Selenium进行网页自动化测试时,iframe是经常会遇到情况。iframe(内联框架)允许在一个网页中嵌入另一个HTML文档。...可以通过以下三种方式来选择具体iframe: 通过iframe索引 如果页面上有多个iframe,可以通过索引切换。索引0开始,0表示第一个iframe,1表示第二个,以此类推。...(一)初始化动作链 要使用ActionChains,首先需要导入它并创建一个实例。...(三)处理无限滚动页面 在一些网站上,内容会随着滚动动态加载,例如社交媒体时间轴。可以通过循环不断向下滚动,直到没有新内容为止。...元素被浮动组件覆盖: 在某些页面,滚动元素可能会被悬浮菜单覆盖。可以使用 JavaScript 滚动调整位置。 滚动速度太快: 无限滚动页面时,滚动速度过快可能导致内容加载不及时。

    4010

    一个简洁、有趣无限下拉方案

    前一点很好理解,我们考虑性能,不可能一个长列表(甚至是一个无限下拉列表)所有列表元素都进行渲染;而后一点,则是本文所介绍方案核心之一!...}); }; 2、更新当前页面渲染一个元素对应序号 (firstIndex) 拿具体例子来说明,我们用一个数组来维护需要渲染页面中数据。...4、padding 调整,模拟滚动实现 既然数据更新以及 DOM 元素更新我们已经实现了,那么无限下拉效果以及滚动体验,我们要如何实现呢?...,异步监听,尽可能得减少 DOM 操作,触发回调,然后去获取新数据来更新页面元素,并且用调整容器 padding 来替代了本该越来越多 DOM 元素,最终实现列表滚动无限下拉。...这就像是一个循环队列一样,随着滚动进行,顶部元素先出视窗,但又将移动到末尾,从而实现无限下拉。

    1.9K20

    基础篇章:关于 React Native 之 ListView 组件讲解

    我和ScrollView那家伙不太相同,我更适于长列表数据,且元素个数可以增删。和ScrollView不同是,我并不立即渲染所有元素,而是优先渲染屏幕上可见元素。怎么样?是不是感觉我更聪明?...举个例子:我最基本使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通数据数组,再使用数据源来实例化一个ListView组件,并且定义它renderRow回调函数...在我母亲制定官方介绍中,这么说:有一些性能优化使得我ListView可以滚动更加平滑,尤其是在动态加载可能很大(或者概念上无限)数据集时候: 只更新变化行 - 提供了rowHasChanged...限制频率行渲染 - 默认情况下,每次消息循环只有一行会被渲染(可以用pageSize属性配置)。这把较大工作分散成小碎片,以降低因为渲染而导致丢帧可能性。...onEndReached function 当所有的数据都已经渲染过,并且列表被滚动到距离最底部不足onEndReachedThreshold个像素距离时调用。原生滚动事件会被作为参数传递。

    2K80

    CSS粘性定位 - 它真正工作原理!

    Stick 探索 在尝试使用 sticky 定位过程中,我很快发现,当一个具有sticky定位样式元素被包裹起来,并且它是包裹元素内唯一元素时,这个被定义为sticky定位元素并不会"粘"住。...Fixed - 当项目固定时,它行为与 position: fixed 完全相同,浮动在视口相同位置,流中移除。...Absolute 定位 - 在粘附区域末尾,元素停止并堆叠在另一个元素顶部,就像绝对定位元素在 position: relative 容器内行为一样。 贴在底部?...在大多数情况下,使用 position: sticky 以将元素固定在顶部类似于这样: .component{ position: sticky; top: 0; } 这正是它被创建出来原因...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器末尾时,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部元素

    28720

    【JS】322- 手把手教你实现前端惰性加载

    2、可以设一个标识符标识已经加载图片index,当滚动滚动时就不需要遍历所有的图片,只需要遍历未加载图片即可。3、可以在计算时候,增加偏移数据,提前加载图片,并使用淡入效果,提高流畅性。...这种条件下,假设 bound=el.getBoundingClientRect(),随着滚动向下滚动,bound.top会越来越小,也就是图片可视区域顶部距离越来越小,当 bound.top==...当数据达到一定量时候,事件绑定和循环位置计算会消耗大量性能,每次调用 getBoundingClientRect() 都会强制浏览器 重新计算整个页面的布局 ,可能给你网站造成相当大闪烁。...交叉观察器: IntersectionObserver 就是为此而生,它是HTML5新增api,可以检测一个元素是否可见, IntersectionObserver能让你知道一个被观测元素什么时候进入或离开浏览器视口...实现下拉无限滚动: ? 在页面底部一个loading状态标签。一旦标签可见,就表示用户到达了页面底部,从而加载新条目放在标签前面。

    96330

    微信小程序实践:2.3 可滚动容器组件之 scroll-view

    关于这个组件,有以下几个问题值得思考: 1,当我们说滚动时,涉及到外面的滚动容器与里面的可滚动实体两个对象,我们说滚动顶部滚动底部,指的是什么呢?是什么到顶部,什么到底部了?...这是自定义实现效果,相当于浏览器滚动条,效果是通过css样式控制。 3、主要属性讲解 scroll-view是一个略显复杂组件。它属性主要支持了两个功能:左右滚动与下拉更新。...我们一般说「滚动顶部滚动底部」,指还不是内部滚动实体滚动到了它所能达到最大值、最小值,而是指滚动实体顶部边缘到达了滚动外框顶部,及底滚动实体底部边缘到达了滚动外框底部。...这件事可能很小,只是改变一个边框、或一处字体1个px大小,但是由于启用了滚动锚定,这个页面可能陷入一种自循环,发生抖动不止现象。...拿到windowHeight之后,它还不是scroll-view应有的高度,因为页面上还可能有自定义底部导航栏、顶部导航栏,这些高度也要减去。

    15.1K30

    这实现牛逼了,原来阮大佬博客阅读进度功能这么简单

    滚动滚动底部时,浏览器此时仍显示一屏内容,此时滚动条无法再滚动,scrollTop 无法再增加,因此 scrollTop 最大值是 scrollHeight- clientHeight ,如果使用...比如设置 linear-gradient(to right top, #0089f2 50%, #DDD 50%) 就可以实现下面效果一个蓝色三角形: body-linear.png看到这种蓝色三角形...scrollPro.gif最后处理最后一屏问题,保证滚动滚动底部时,阅读进度到达 100% scrollBottom.png这里如果没能理解原理,不用急,后面我会更详细演示 @supports...类似于 js 功能检查,可以检查 CSS 中某一属性或功能当前浏览器是否支持。...: no-repeat; } 复制代码 设置盖住蓝块白块 阅读进度条高度为 3px ,因此设置白块高度为 100% \- 3px,可以另外加一个 div 元素来设置白块,但小包推荐使用为元素

    72730

    奇思妙想 纯 CSS 滚动进度条效果

    公众号回复[ 加群 ] 与百万攻城狮并肩成长 作者:chokcoco 结论先行,如何使用 CSS 实现下述滚动效果? ? 就是顶部黄色滚动进度条,随着页面的滚动进度而变化长短。...尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙实现上述效果。 OK,继续。这个效果是我在业务开发过程中遇到一个类似的小问题。...其实即便让我借助 Javascript ,我第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢? ?...假设我们页面被包裹在 中,可以滚动是整个 body,给它添加这样一个左下到到右上角线性渐变: body { background-image: linear-gradient...不知道已经有过类似的文章,所以各位也可以看看下面这篇: https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 最后 其实这只是非常牛逼渐变非常小一个技巧

    1.2K30

    你也许不知道浏览器一些滚动行为

    效果对比如下: 很明显,前者就是把滚动高度设置成100,而后者是每次都增加100,这就是为什么称之为相对滚动了✅ 如何指定一个元素显示在视窗 1...."center" || "end" }); 效果如下: 如何设置滚动具有平滑过渡效果 1....或者用css属性设置: html { scroll-behavior: smooth; // 全局滚动具有平滑效果 } // 或者所有 * { scroll-behavior: smooth;...} 效果如下: 注意:设置了该属性之后,所有方法都可以不用设置behavior参数了,二选一即可,因为都是控制当前指定元素滚动行为,所以锚点跳转、设置scrollTop也具有平滑(smooth)滚动行为...: start; } } 效果如下: 仔细看会发现,我们松手时候,会将最近元素滚动到最右边(初始位置,对于Y轴来讲就是顶部,X轴则是右边) 也可以设置出现在中间: li { scroll-snap-align

    3K20

    不会玩阴阳师我带你一键下载《阴阳师:百闻牌》所有卡牌并调用百度OCR识别文字信息

    : 阴阳师卡牌下载文字识别simple_test 但是一个项目不应该也不可能止于此,可以做一些更多事,我可以使用请求链接来下载图片,再将其中文字识别出来。...,网页在展示较多内容时,一般不是直接在一个页面全部展示,而是通过不同方式分成不同部分,常见有3种: (1)分页 即将内容分到多页中,每页展示固定数量内容,各页之间网页结构类似,这类网站如淘宝...,需要有一个退出循环条件,否则会成为死循环。...在该案例中,如果未加载到底部时,会出现下滑展示更多提示,如下: ? 当加载到底部时,此提示消失,如下: ? 所以可用该元素存在作为循环继续条件,即该元素消失时,循环也就终止。...重新创建应用或者等一天再测试,因为毕竟是免费,百度也不可能无限量供应。

    1.4K20

    动手练一练,手写一个价格对比、固定表头滚动表格

    一、实践一个功能价格对比表格案例 功能对比是一个很常用功能,尤其是当网站服务越来越多时,就需要一个类似的功能,让用户能够直观感受到各种服务差异,帮助用户选择适合自己方案。...今天我们将通过一个界面十分漂亮功能价格对比表格,展示固定表头功能,实例操作展示如视频所示,当滚动滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。...offsetTop:当前元素顶部距离最近父元素顶部距离,和有没有滚动条没有关系。单位px,只读元素。...本部分内容摘自: https://juejin.im/entry/59c1fd23f265da06594316a9 作者:左鹏飞 三、创建 HTML 基础结构 1、创建三个基础 sections 区域...获取用户视口顶部滚动距离(pageYOffset) 获取最后一部分内容区域距离窗口顶部高度(getBoundingClientRect().top) 检测滚动条是否滚动到表格区域。

    3.2K31

    一个 react-infinite-scroller 轮子

    offset 公式 无限滚动原理很简单:只要 很长元素总高度 - 窗口距离顶部高度 - 窗口高度 < 阈值 就加载更多,前面那一堆下称为 offset,表示还剩多少 px 到达底部。...相当于上面的 “很长元素总高度” scrollTop: 可以获取或设置一个元素内容垂直滚动像素数。...图示: 不过,这里 “当前窗口顶部与很长元素顶部距离” 这一步并不能通过变量来获得,只能用 JS 来获取: // 元素顶部页面顶部距离 calculateTopPosition(el:...props 透传给滚动元素 在 passProps 里添加 ref,开发者可以通过 ref 获取滚动元素 总结 这篇文章主要带大家过了一遍 react-infinite-scroller 源码,...) 其中 calculateTopPosition 为递归地计算元素顶部浏览器窗口顶部距离 window 向上滚动:window.pageYOffset || doc.scrollTop 其中 doc

    2.6K30

    手把手教你实现前端惰性加载

    2、可以设一个标识符标识已经加载图片index,当滚动滚动时就不需要遍历所有的图片,只需要遍历未加载图片即可。 3、可以在计算时候,增加偏移数据,提前加载图片,并使用淡入效果,提高流畅性。...这种条件下,假设 bound=el.getBoundingClientRect(),随着滚动向下滚动,bound.top会越来越小,也就是图片可视区域顶部距离越来越小,当 bound.top==...当数据达到一定量时候,事件绑定和循环位置计算会消耗大量性能,每次调用 getBoundingClientRect() 都会强制浏览器 重新计算整个页面的布局 ,可能给你网站造成相当大闪烁。...交叉观察器: IntersectionObserver 就是为此而生,它是HTML5新增api,可以检测一个元素是否可见, IntersectionObserver能让你知道一个被观测元素什么时候进入或离开浏览器视口...实现下拉无限滚动: 在页面底部一个loading状态标签。一旦标签可见,就表示用户到达了页面底部,从而加载新条目放在标签前面。

    96710

    无限滚动加载最佳实践

    优秀无限滚动五项原则 将无限滚动做好,并不是不可能完成任务。为了完成它,记住并遵守以下方针。 1....如果屏幕上是滚动内容,用户滚动获取新内容时候,导航条可以隐藏起来;当用户开始往回滚动试图回到顶部时候再显示出来。 ? 2. 如果有页脚,加上“加载更多”按钮 无限滚动阻碍用户访问页脚。...返回按钮将用户待回至之前位置 有时候,无限滚动实现带来一个主要可用性缺陷:滚动位置并未被记录为“状态”。如果用户列表中链接跳转了,然后点返回按钮,他们希望能回到页面原来相同位置。...但是列表位置不再存在了,这意味着使用浏览器返回按钮一般都导致滚动位置重置页面顶部。无怪乎用户很快就觉得沮丧,都没有一个合适“回到列表”功能。 ?...因为加载新内容是一个很快动作(不会超过 2-10 秒钟),你可以使用循环动画来提供反馈,表明系统正在工作。 ?

    4.3K20

    CSS粘性定位是怎样工作

    正如我下面将要解释那样,新粘性定位与所有类型都有相似之处。 我一个粘性定位 可能很多人都玩过粘性定位。我已经接触过一段时间了,直到我意识自己并不是完全理解它。...粘性容器 —— 是包装粘性元素 HTML 元素。 这是粘性元素可以浮动最大区域。 当你定义一个具有 position:sticky 样式元素时,父元素会被自动定义为粘性容器!...绝对 —— 在粘贴区域末尾,元素会停止,并堆叠在另一个元素顶部,就像一个绝对定位元素被放在一个 position: relative 容器内行为。 粘在底部?...在大多数情况下,您可以使用粘性定位将元素粘贴到顶部,如下所示: ? 这正是它被设计初衷,而在此之前,只能使用JavaScript完成这个功能。 但你也可以使用它把元素粘到底部。...这意味着你可以把页脚定义为粘性,并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器末端时,元素会停在它自然位置。 最好是在以粘性容器底部为自然位置元素上使用它。

    1.8K10

    控制页面的滚动:自定义下拉到刷新和溢出效果

    (橡皮筋效果),使用overscroll-behavior-y: none: 完整Demo 总结 CSS overscroll-behavior属性允许开发人员在达到内容顶部/底部时覆盖浏览器默认溢出滚动行为...作为一个例子,带一个应用程序抽屉带有大量用户可能需要滚动项目。当它们到达底部时,溢出容器将停止滚动,因为没有更多内容可供使用。换句话说,用户到达“滚动边界”。...拉下页面并释放,为更新近帖子被加载。事实上,这种特殊用户体验非常流行,以至于Android这样移动浏览器都采用了相同效果。向下滑动页面顶部会刷新整个页面 ? ?...注意:使用overscroll-behavior:包含html元素可防止超滚动导航操作 none - 与包含相同,但它也可以防止节点本身内滚动效果(例如,Android超量滚动发光或iOS橡皮圈)...最终结果是当用户到达聊天记录顶部/底部时,主页面保持放置状态。在聊天框中开始滚动不会传播出去 ?

    3.4K20

    waypoint_使用jQuery Waypoint创建粘性导航标题

    稍微增加一点,我们将使用另一个插件ScrollTo ,以便在用户单击导航链接时提供平滑滚动和方便定位。 步骤1:盒子 我确定您已经熟悉HTML5引入各种新元素 。...但是,如果您缓慢向下滚动到刚刚创建航路点,您可能会注意,由于导航栏内容流中删除,因此在传递时,内容会“跳跃”一些。 除了看起来很草率之外,这种行为还可能使您部分内容模糊不清,并损害可用性。...当然可以用CSS @keyframes达到类似效果,但是对它们支持要少得多(并且有很多供应商前缀),它们灵活性较差,并且“ up”动画会是一个很大禁忌。...如果我们向下滚动,则航路点所属部分与变为活动状态部分相同。 但是,向上滚动经过一个航路点就意味着它是前面的部分,因此我们使用.prev()进行选择。...如果您不仅仅想添加和删除类,还可以考虑使用LavaLamp这样插件。 在某些时候,您可能已经注意,单击导航栏中链接会将部分顶部置于浏览器视口顶部

    3.3K30
    领券