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

原生Javascript滚动到底部,带有动态添加内容的div上的平滑动画

可以通过以下步骤实现:

  1. 首先,需要获取到包含内容的div元素和滚动条所在的父元素。可以使用document.getElementById()方法或其他选择器方法获取到这两个元素。
  2. 接下来,需要监听内容的变化,以便在内容添加时自动滚动到底部。可以使用MutationObserver来监听内容的变化。MutationObserver是一个用于监视DOM树变化的API,可以在DOM树发生变化时触发回调函数。
  3. 在回调函数中,可以使用scrollTop属性来实现滚动到底部的效果。将scrollTop属性设置为scrollHeight属性的值,即可将滚动条滚动到底部。可以使用元素的scrollIntoView()方法来实现平滑滚动的效果。

下面是一个示例代码:

代码语言:txt
复制
// 获取包含内容的div元素和滚动条所在的父元素
var contentDiv = document.getElementById('content');
var parentDiv = document.getElementById('parent');

// 创建MutationObserver实例,监听内容的变化
var observer = new MutationObserver(function(mutations) {
  // 滚动到底部
  parentDiv.scrollTop = parentDiv.scrollHeight;
});

// 配置MutationObserver的选项
var config = { childList: true };

// 开始监听内容的变化
observer.observe(contentDiv, config);

// 动态添加内容的示例
var addButton = document.getElementById('addButton');
addButton.addEventListener('click', function() {
  // 创建新的内容元素
  var newContent = document.createElement('div');
  newContent.textContent = '新的内容';

  // 将新的内容添加到包含内容的div元素中
  contentDiv.appendChild(newContent);
});

在上述示例代码中,我们首先获取到包含内容的div元素和滚动条所在的父元素。然后创建了一个MutationObserver实例,配置了选项,开始监听内容的变化。在回调函数中,将滚动条的scrollTop属性设置为scrollHeight属性的值,实现滚动到底部的效果。最后,我们添加了一个按钮的点击事件,用于动态添加内容,触发内容变化的监听。

这是一个简单的实现示例,你可以根据实际需求进行修改和扩展。

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

相关·内容

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 介绍和使用方法

mCustomScrollbar 样式 没有内容当然谈不出现这个插件效果了。...例: width:100px;height:100px;overflow:auto; 完成上述操作之后,带有滚动内容滚动条,就变成这个插件默认样式了。...值:true,false 设置 false 如果你内容块已经被固定大小 advanced:{ updateOnContentResize:Boolean }:自动根据动态变换内容调整滚动大小...方法来替代这个功能 advanced:{ autoExpandHorizontalScroll:Boolean }:自动扩大水平滚动长度 值:true,false 设置 true 你可以根据内容动态变化自动调整大小...原理就是这样: 首先获取要修改滚动条样式内容区块,然后使用 CSS 隐藏掉默认滚动条,然后使用 Javascript 添加很多 HTML 结构,再配合 CSS 做出一个滚动效果。

14.1K30

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

, // //页面滚动速度 // scrollingSpeed: 700, // //定义锚链接,用户可以快速打开定位某一页面;不需要加"#",不要和页面中任意id和name相同...// //滚动到最顶部后是否连续滚动底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...keyboardScrolling: false, // //在移动设置中页面敏感性,最大为100,越大越难滑动 // touchSensitivity: 5, // //设为false,则通过锚链接定位某个页面不再有动画效果...keyboardScrolling: false, // //在移动设置中页面敏感性,最大为100,越大越难滑动 // touchSensitivity: 5, // //设为false,则通过锚链接定位某个页面不再有动画效果...(boolean); // //动态设置scrollingSpeed配置项 // setScrollingSpeed(milliseconds); // //添加或删除鼠标/滑动控制,第一个参数为启用

11.9K30
  • 06-移动端开发教程-fullpage框架

    字符串 #fff 左右滑块箭头背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal...内容超过满屏后是否显示滚动条 css3 布尔值 false 是否使用 CSS3 transforms 滚动 paddingTop 字符串 0 与顶部距离 paddingBottom 字符串 0 与底部距离...afterRender 页面结构生成后回调函数,或者说页面初始化完成后回调函数 afterSlideLoad 滚动到某一水平滑块后回调函数,与 afterLoad 类似,接收 anchorLink...配合animate.css问题,animate动画添加上animated样式和具体动画类型才会具有动画效果。如果一开始全设置好了那么只有第一屏有动画效果,不是我们想要结果。...配合fullpageonLeave事件,可以实现在上一屏离开时候,给下一屏添加动画样式类,并把一屏动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素自定义属性中。

    5.1K50

    06-移动端开发教程-fullpage框架

    字符串 #fff 左右滑块箭头背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal...内容超过满屏后是否显示滚动条 css3 布尔值 false 是否使用 CSS3 transforms 滚动 paddingTop 字符串 0 与顶部距离 paddingBottom 字符串 0 与底部距离...afterRender 页面结构生成后回调函数,或者说页面初始化完成后回调函数 afterSlideLoad 滚动到某一水平滑块后回调函数,与 afterLoad 类似,接收 anchorLink...配合animate.css问题,animate动画添加上animated样式和具体动画类型才会具有动画效果。如果一开始全设置好了那么只有第一屏有动画效果,不是我们想要结果。...配合fullpageonLeave事件,可以实现在上一屏离开时候,给下一屏添加动画样式类,并把一屏动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素自定义属性中。

    5.1K90

    fullPage.js全屏滚动插件

    ,单位为毫秒 easing (striing)滚动动画方式 menu (true/false) 绑定菜单,设定相关属性与 anchors 值对应后,菜单可以控制滚动 navigation (true...)滚动到最底部后是否滚回顶部 loopTop (true/false)滚动到最顶部后是否滚底部 loopHorizontal (true/false)左右滑块是否循环滑动 autoScrolling (...true/false) 是否使用插件滚动方式,如果选择 false,则会出现浏览器自带滚动条 scrollOverflow (true/false)内容超过满屏后是否显示滚动条 css3 (true.../触控板控制 setKeyboardScrolling() 添加或删除键盘方向键控制 setScrollingSpeed() 定义以毫秒为单位滚动速度 6.回调函数 -- -- afterLoad...afterRender 页面结构生成后回调函数,或者说页面初始化完成后回调函数 afterSlideLoad 滚动到某一水平滑块后回调函数,与 afterLoad 类似,接收 anchorLink

    15K20

    从15个点来思考前端大量数据渲染与频繁更新方案

    动态计算:虚拟列表组件会动态计算并调整滚动容器滚动高度,以确保滚动行为与真实数据量相匹配,为用户提供准确滚动体验。...如果图书馆书架是可移动,并且管理员根据你想要位置调整书架高度,使你总是感觉所有书就在你可达范围内,那么这个过程就类似于虚拟列表动态计算。...虚拟列表会计算当前应该显示内容正确大小和位置,调整滚动容器高度,使得滚动行为看起来和感觉就像是在处理全部数据,虽然实际只渲染了一部分内容。...优化动态生成内容:对于通过JavaScript动态生成并添加到页面的内容,应注意控制生成DOM元素数量和复杂度,避免在每次更新时重建整个结构。...iframe懒加载:同样,延迟加载不立即需要iframe内容。 关键CSS优化: 内联关键CSS:将关键渲染路径CSS内联HTML中,加速首次渲染。

    1.9K42

    不容忽视 8 个 DOM API

    使用 scrollTo() 方法实现平滑滚动 scrollTo() 方法于 window 对象,并指示浏览器滚动到页面上指定位置。...默认情况下, scrollTo() 执行突然滚动,类似于使用带有指定哈希URL本地链接。然而,通过结合 ScrollToOptions 对象,我们可以实现平滑动画滚动效果。...与 classList 一起进行类操作 在JavaScript中,当与元素一起工作时,类操作是一项常见任务。 classList 属性提供了一组方法,简化了在元素添加、删除和切换类操作。...平滑动画方法 在网页为元素添加动画效果是一个常见需求,但有时候也是一项具有挑战性任务。...HTML或文本内容插入相对于其他元素特定位置,但还有两种相关方法可以提供额外灵活性: insertAdjacentElement() 和 insertAdjacentText() 。

    30320

    Scroll,你玩明白了嘛?

    今天主要聊一下关于 scroll 应用: CSS 平滑滚动 JS 滚动方法 区分人为滚动和脚本滚动 2、CSS 平滑滚动 2.1 一行样式改善体验 在一些滚动交互比较频繁场景,我们可以通过在可滚动容器增加一行样式来改善用户体验...  同时,为了实现平滑滚动,我们在滚动容器设置了如下 CSS: .scroll-ctn {  display: block;  width: 100%;  height...,容器内默认滚动呈现了平滑滚动效果。...2、在可滚动容器设置了 scroll-behavior: smooth 之后,还能够影响浏览器 Ctrl+F 表现,使其也呈现平滑滚动效果。...而且相较于其他方法,一般不会出什么幺蛾子(后文会讲到)。 3.2 应用 自己以往需要用到滚动场景有: 组件初始化,定位目标位置 点击当前页靠底部某个元素,触发滚动翻页 ......

    3.1K22

    JS经典案例-无缝滚动轮播图(纯JS)

    引言 在数字化时代洪流中,无缝滚动轮播图作为网页设计常青元素,不仅仅是视觉盛宴开启者,更是用户体验交互艺术展现。...它以其流畅动态效果,无声地讲述着品牌故事,引领着用户视线穿梭于信息与美学交织走廊。...本文将以最基础 HTML+css+JavaScript 来实现一个无缝滚动轮播图案例。...效果图 需求 制作一款无缝滚动轮播图,具备以下特性: 自动无缝滚动切换图片 ️ 鼠标悬停暂停轮播,离开恢复轮播 向左/向右按钮切换图片 底部小圆点指示当前图片并可点击切换 思路 图片容器无缝衔接...事件监听与控制: 添加鼠标事件监听,实现播放与暂停逻辑。 平滑过渡: 利用CSS过渡效果实现动画平滑性。 灵活点选控制: 小圆点与图片索引同步,提升用户体验。

    69010

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

    (橡皮筋效果),使用overscroll-behavior-y: none: 完整Demo 总结 CSS overscroll-behavior属性允许开发人员在达到内容顶部/底部时覆盖浏览器默认溢出滚动行为...使用该案例包括禁用移动设备“拉动到刷新”功能,消除过度滚动发光和橡皮筋效果,并防止页面内容在模态/叠加层下滚动 背景 滚动边界和滚动链接 滚动是与页面交互最基本方式之一,但是由于浏览器诡异默认行为...作为一个例子,带一个应用程序抽屉带有大量用户可能需要滚动项目。当它们到达底部时,溢出容器将停止滚动,因为没有更多内容可供使用。换句话说,用户到达“滚动边界”。...开发人员最终编写不必要JavaScript添加非被动触摸监听器(阻止滚动),或者将整个页面粘贴到100vw / vh中(以防止页面溢出)。.... */ overscroll-behavior-y: contain; } 通过这个简单添加,我们修复了聊天框演示中双拉到更新动画,并且可以实现使用整洁加载动画自定义效果。

    3.4K20

    Web浏览器滚动方案一览| rAF等

    Window 大小与文档大小要获取窗口大小和文档大小,我们可以使用JavaScript编程语言。...如果 top=false,页面滚动,使 elem 出现在窗口底部。元素底部边缘将与窗口底部对齐。亦或是接受一个包含以下属性对象:behavior:定义滚动是立即还是平滑动画。...可以取值为 smooth(平滑动画)、instant(立即发生)或 auto(由 scroll-behavior 计算值决定)。...如果它增加了(滚动条消失后),那么我们可以在 document.body 中滚动条原来位置处通过添加 padding,来替代滚动条,这样这个问题就解决了。保持了滚动条冻结前后文档内容宽度相同。...« 张鑫旭-鑫空间-鑫生活平滑滚动实现() - 掘金

    15010

    用APICloud如何开发出运行体验良好、高性能 App

    为了不影响窗体切换动画执行,可以在切换动画执行完毕后再进行动态数据加载和界面的刷新。 7....无论是在 Android 还是 iOS ,APICloud 引擎会从整体保证默认窗口动画类型是性能最好。...在后台关闭页面时,应注意在关闭方法中添加 animation:{type:"none"},来防止切换动画出现影响用户体验; 9....导航切换: 切换底部导航或顶部分类菜单时候,要求切换体验平滑,切换过程不能出现白屏、闪屏等现象 建议使用 FrameGroup 来实现 Frame 切换,要按需合理配置预加载 Frame 数量,每个...列表滚动滚动效果要平滑流畅,不能使用 iscroll 等 JS 方式来实现滚动 建议使用 Window+Frame UI 结构,以 Native 方式来实现列表页面的滚动

    2.2K20

    医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能 JavaScript 实用工具库。_.throttle(func, , [option

    节流阀实例 无限滚动 用户向下滚动无限滚动页面,需要检查滚动位置距底部多远,如果邻近底部了,我们可以发 AJAX 请求获取更多数据插入页面中。...我们心爱 _.debounce 就不适用了,只有当用户停止滚动时候它才会触发。只要用户滚动至邻近底部时,我们就想获取内容。 使用 _.throttle 可以保证我们不断检查距离底部有多远。...根据经验,如果 JavaScript 方法需要绘制或者直接改变属性,我会选择 requestAnimationFrame,只要涉及重新计算元素位置,就可以使用它。...涉及 AJAX 请求,添加/移除 class (可以触发 CSS 动画),我会选择 _.debounce 或者 _.throttle ,可以设置更低执行频率(例子中200ms 换成16ms)。...requestAnimationFrame:可替代 throttle ,函数需要重新计算和渲染屏幕元素时,想保证动画或变化平滑性,可以用它。注意:IE9 不支持。

    2.4K20

    排行榜--实现点击视图自动滚动到当前用户所在位置.

    第三步: 使用scrollIntoView方法滚动视图当前选中元素 // 平滑滚动到当前元素 currentItem.scrollIntoView({ behavior: 'smooth',...scrollIntoView(alignToTop):接受一个布尔值参数,决定元素是与滚动顶部还是底部对齐。...scrollIntoView(scrollIntoViewOptions):接受一个对象作为参数,提供了更多滚动选项。 参数 alignToTop(可选):布尔值,控制元素滚动到顶部还是底部对齐。...scrollIntoViewOptions(可选实验性):对象,包含以下属性: behavior:定义滚动行为是平滑动画还是立即发生。...可取值有 smooth(平滑动画)、instant(立即发生)或 auto(由CSS scroll-behavior 属性决定)。

    16810

    视差滚动效果实现

    视差滚动是一种在网页设计和视频游戏中常见视觉效果技术,它通过在不同速度上移动页面或屏幕多层图像,创造出深度感和动感。...,在滚动时相对视口不同距离元素,滚动所产生位移在视觉就会呈现越近元素滚动速度越快,相反越远元素滚动速度就越慢。...如下是在 React 中实现示例,通过监听滚动事件,封装统一视差组件,来达到多样动画效果。...return {children}; }; 在此基础你可以添加缓动函数使动画效果更加平滑;以及使用requestAnimationFrame...适应显示器刷新率:requestAnimationFrame 会自动适应显示器刷新率。这意味着在 60Hz、120Hz 或其他刷新率显示器动画都能保持流畑。

    14720
    领券