文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Scroll，你玩明白了嘛？

今天主要聊一下关于 scroll 的应用： CSS 平滑滚动 JS 滚动方法 区分人为滚动和脚本滚动 2、CSS 平滑滚动 2.1 一行样式改善体验 在一些滚动交互比较频繁的场景，我们可以通过在可滚动容器上增加一行样式来改善用户体验...2、在可滚动的容器上设置了 scroll-behavior: smooth 之后，还能够影响到浏览器 Ctrl+F 的表现，使其也呈现平滑滚动的效果。...举个例子，现在我希望在列表组件加载完成后，列表能够自动滚动到第三个元素。...3.3 scrollIntoView 的奇怪现象 3.3.1 页面整体偏移 最近在过一些历史用例的时候，遇到了这种情况： 现象大概就是，当我通过按钮，滚动定位到聊天区域的某条消息时，页面整体发生了偏移...使用 {block: "center"}，元素在其祖先的中间对齐。 使用 {block: "end"}，元素在其祖先的底部对齐。

3.9K22
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    移动端H5坑位指南

    弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 当打开弹窗时给声明position:fixed;left:0;width:100%并动态声明top。...当输入完成键盘占位消失后，页面高度有可能回不到原来高度，产生坍塌导致Webview底色露脸，简单概括就是输入框失焦后页面未回弹。...在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。...behavior：动画过渡效果，默认auto无，可选smooth平滑 inline：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐 block...为了能让媒体在页面加载完成后自动播放，只能显式声明播放。

    4.3K10

    操作滚动条小结：scrollIntoViewanimate等方法的来龙去脉

    scroll和scrollTo在现代浏览器中都支持的// 使用scrollTo滚动页面到指定位置（100px, 100px）window.scrollTo(100, 100);// 使用scroll执行相同的操作...window.scroll(100, 100);允许你指定滚动行为（如是否平滑滚动）：// 使用对象参数带有平滑滚动window.scrollTo({ top: 100, left: 100, behavior...scrollIntoView滚动到指定为止2000年，DOM2规范 带来了scrollIntoView API，但是微软从屠龙少年变恶龙后，就奔对新规范置之不理了！...《复杂web动画，不慌，选择 web Animations API 》，比如直播的世界消息或者弹幕：我们需要消息先运动到屏幕中间，消息最少需要在停留2秒，如果消息过长，消息还需要 匀速滚动 ，之后再滑出屏幕...滑入暂停，如果消息过长，消息还需要匀速滚动滑出难点就在于，暂停阶段，消息滚动的时间并不是确定的，需要计算。

    1.1K10

    中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

    弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 当打开弹窗时给声明position:fixed;left:0;width:100%并动态声明top。...当输入完成键盘占位消失后，页面高度有可能回不到原来高度，产生坍塌导致Webview底色露脸，简单概括就是输入框失焦后页面未回弹。...在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。...「behavior」：动画过渡效果，默认auto无，可选smooth平滑 「inline」：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐 「...为了能让媒体在页面加载完成后自动播放，只能显式声明播放。

    5K22

    H5C3第四节

    center: 弹性盒子元素将向行中间位置对齐 space-around: 弹性盒子元素会平均地分布在行里 space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的...fullpage是jquery插件 引入fullpage的js文件 页面结构 编写js代码 滚动到顶部后是否连续滚动到底部，默认false loopBottom 滚动到底部后是否连续滚动到顶部，默认false continuousVertical 是否循环滚动，默认为false..., index) 滚动到某一个section,当滚动结束后，会触发一次这个回调函数，anchorLink是锚链接的名称，index从1开始计算 onLeave(index,nextIndex,diretion...nextIndex是滚动到的页面的序号，direction是往上还是往下滚动，值是up或者down.

    6.8K30

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

    通过使用这些属性，我们可以对网页进行响应式设计，并确保其在不同设备上的显示效果良好。...例如：window.scrollTo({ top: 100, behavior: 'smooth'});scrollTo 方法对整个页面和单个元素都起作用，常用于点击某个按钮后滚动到页面指定位置，或者滚动元素内部内容...它有一个参数alignToTop：如果 top=true（默认值），页面滚动，使 elem 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。...如果 top=false，页面滚动，使 elem 出现在窗口底部。元素的底部边缘将与窗口底部对齐。亦或是接受一个包含以下属性的对象：behavior：定义滚动是立即的还是平滑的动画。...如果它增加了（滚动条消失后），那么我们可以在 document.body 中滚动条原来的位置处通过添加 padding，来替代滚动条，这样这个问题就解决了。保持了滚动条冻结前后文档内容宽度相同。

    74110

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

    例子 // 避免在滚动时过分的更新定位 jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 点击后就调用 `renewToken...看下滚动事件的例子： 当使用触控板，滚动滚轮，或者拖拽滚动条的时候，一秒可以轻松触发30次事件。经我的测试，在智能手机上，慢慢滚动一下，一秒可以触发事件100次之多。...相似的使用场景还有，直到用户输完，才验证输入的正确性，显示错误信息。...节流阀实例 无限滚动 用户向下滚动无限滚动页面，需要检查滚动位置距底部多远，如果邻近底部了，我们可以发 AJAX 请求获取更多的数据插入到页面中。...总之： debounce：把触发非常频繁的事件（比如按键）合并成一次执行。 throttle：保证每 X 毫秒恒定的执行次数，比如每200ms检查下滚动位置，并触发 CSS 动画。

    3.1K20

    fullPage.js全屏滚动插件

    true/false) 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow (true/false)内容超过满屏后是否显示滚动条 css3 (true...() 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 为序号，从1开始计算 onLeave() 滚动前的回调函数...，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction...afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink...、index、slideIndex、direction 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex

    18.6K20

    最新iOS设计规范四｜3大界面要素：视图(Views)

    三、警示框（Alerts） 警示框主要用来传达与APP或设备状态相关的重要信息，并且通常会请求反馈。警示框由标题、可选消息、一个或多个按钮以及用于收集用户输入信息的可选文本字段组成。...尽量保持消息足够短，尽量保持在一两行之内避免滚动，注意语句大小写及标点符号。 避免使用带有指责、批判、或侮辱性的词语。...将“取消”按钮作为默认按钮，并使用粗体文本。 允许用户通过退出APP到主屏幕来取消警示框。当警示框出现时，退出到主屏幕可以退出APP。这个操作产生与点击取消按钮的效果是相同的。...页面元素通常会显示有多少页面，多少屏，或者多少数量的内容是当前可用及可见的。如果你在滚动视图中显示页面控制元素，则需要关闭滚动视图中的滚动条以免为用户带来困扰。...避免将索引与包含右对齐元素的表单结合在一起。索引一般通过大的滑动手势来控制的。如果附近存在其他交互元素，例如显示指示器，则在出现手势时很难辨别用户的意图，并且可能会激活错误的元素。

    13.7K31

    8 个 DOM 功能

    scrollTo() 方法用于在窗口或元素中平滑滚动 平滑滚动总是经常被用到的。当点击本地页面链接并立即跳转到指定位置时（如果你眨眼，甚至可能会错过跳转过程），这会显得很突兀。...平滑滚动改进了页面的用户体验。 虽然过去用 jQuery 插件就足以完成了，但现在用 window.scrollTo() 方法只需要一行 JavaScript。...但这样做的话滚动并不是一个平滑的动画效果，页面将会突然滚动。 有时确实是你想要的。...请看下面这个 CodePen 演示，允许你自定义滚动量和行为： CodePen演示：https://codepen.io/impressivewebs/pen/pGYXgj 尝试在框中输入一个数字（最好是一个比较大的数字.../pen/QoZoQe 演示中的每个按钮都将按照按钮文本描述的方式进行响应，并显示一条显示当前点击次数的消息。

    2.7K20

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

    它的唯一目的是在用户滚动到某个元素时触发事件。 如您所见，它非常简单，但提供了很大的灵活性-您可以在其主页上查看几个示例 。 在页面中包含jQuery和Waypoint，让我们开始吧！...立即尝试：将以下内容添加到脚本中，并滚动到导航栏，弹出消息。...但是，如果您缓慢向下滚动到刚刚创建的航路点，您可能会注意到，由于导航栏从内容流中删除，因此在传递时，内容会“跳跃”一些。 除了看起来很草率之外，这种行为还可能使您的部分内容模糊不清，并损害可用性。....stop()通过清除jQuery的事件队列来防止可能的错误。...由于我们没有离开渐进增强的轨道，因此没有理由不坚持使用jQuery的强大功能。 ---- 步骤6：突出显示和平滑滚动 随着读者逐步浏览页面的不同部分，您可能需要更改突出显示的项目。

    5.4K30

    【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

    背景介绍 日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。....zip && unzip 01.zip && rm 01.zip 在浏览器中预览 index.html 页面 目标效果 请在 js/index.js 文件中补全代码，最终实现传送门的功能。...具体需求如下： 点击页面侧边的顶部、中间或底部按钮，页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下： 顶部：滚动条距离页面顶部 0 ～ 960px（不包含 960）的范围。...中间：滚动条距离页面顶部 960 ～ 1920px（包含 960，不包含 1920）的范围。 底部：滚动条距离页面顶部大于等于 1920px 的范围。...当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **.active-color**），其余按钮样式变为默认（即 **.default-color**）。

    1.5K00

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

    // //定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同 // anchors: ["page1","page2","page3"]...，设为false后，会出现浏览器自带的滚动条，将不会按页滚动 // autoScrolling: false, // //是否包含滚动条，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动...5, // //设为false，则通过锚链接定位到某个页面不再有动画效果 // animateAnchor: false, // //是否记录历史，可以通过浏览器的前进后退来导航...// //定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同 // anchors: ["page1","page2","page3"]...，设为false后，会出现浏览器自带的滚动条，将不会按页滚动 // autoScrolling: false, // //是否包含滚动条，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动

    13.5K30

    第134天：移动web开发的一些总结（二）

    ，只会从一组css到另一组css的切换。...两种设计之间没有任何平滑渐变。只使用媒体查询，布局有时会变得不可控制。 当然，这只是建议，也有一些页面采用固定布局的情况下能够很好的在一些没有考虑过媒体查询情况下的设备上很好的展示。...border：0.5px；（错误），仅仅ios8可以使用 通用方案：scaleY（0.5） （3） 相对单位rem 为了适应各大屏幕的手机，px略显固定，不能根据尺寸的大小而改变，使用相对单位更能体验页面兼容性...(3) 弹性滚动，下拉刷新 ①弹性滚动：当客户端的页面滚动到顶部或底部的时候，滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。...:hidden;/* 防止闪白 */ 6）更多图片的优化，保留3个要使用的节点，当前的，上一个，下一个图片的节点，剩余的不需要的删除 7）jQuery Mobile（JQM jQMobile） 是jQuery

    2.4K10

    干好这件事，卷死所有同行

    顶部标签 与输入域左垂直对齐 优点：节省水平空间，标签长度弹性大，可以加快浏览和处理速度。 缺点：垂直空间占用比较大，表单项多时需增加页面滚动。...左对齐标签 文字左对齐放置在输入域的左边 优点：文字开头按阅读视线对齐，方便用户快速浏览表单；节约垂直空间。 缺点：标签与表单域联系不紧密，视觉跳动大，填表不流畅；标签和输入域的弹性长度小。...提示信息 根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段，提示信息在输入前发生的称为引导提示，提示信息在输入中/后发生的叫反馈提示。...由于提示信息这块比较简单，输入中和输入后的验证我就不再啰嗦啦。 输入前 其他 输入格式 根据用户的记忆结构（7±2法则），采用合理的格式约束，能够方便用户更快的完成填写，而减少错误出现。...弹框loading：确定按钮点击后需有loading。 表格loading：用表格自带的loading属性。 滚动条 表格宽度过长- 滚动条最好出现在表格中，不是在页面级别。

    3.5K10

    CSS 实用新特性：交互、组件、效率的革新

    场景案例：适用于注册表单中，用户输入无效邮箱并点击提交后，提示错误信息，而非初始加载即报错。开发价值：替代 :invalid 和 :valid 逻辑，避免过早干扰用户，提升表单交互的友好性。...而 :user-invalid 初始时即使内容为空也不会匹配，需用户交互（提交 / 失焦）后生效，仅在明确操作后反馈错误，精准且克制。...align-content 支持默认占位符以及输入内容未超出时居中，超出后才正常滚动：4....日语词组换行： 中文或日语等某些东亚语言不使用空格来分隔字词，并且行可以在任何字符处换行，即使是在字词中间也是如此。...:has() 可以帮助选择 H1 元素后紧跟的 H2 元素（由兄弟选择器 + 指示），并通过 CSS 规则来减少标题的间距。

    1.6K10

    前端组件库_前端组件库有什么好处

    autosize – 使文本框自动适应所输入的内容 11....滚动加载更多 jScroll 13.11 平滑滚动插件(Smooth Scroll) jquery-smooth-scroll jquery.scrollTo – 平滑滚动到页面指定位置 13.12 全屏滚动...pagePiling.js – 全屏滚动效果 13.13 分屏滚动 multiscroll.js – 分屏滚动效果 13.14 转场效果 Animsition – 页面切换时的过渡效果 13.15 固定元素...13.17 拖拽组件 Draggabilly – 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏 Readmore.js – 内容显示与隐藏插件...Transit – CSS transitions and transformations for jQuery Move.js – 简化CSS3动画的JS库 ScrollMe – 在网页中加入各种滚动动画效果

    7.7K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券