smooth-scrolling 相关问题

平滑滚动是一种减少滚动时显示突然跳跃的技术。滚动时,内容将显示为无缝地流入和流出屏幕。许多浏览器附带它,但它也可以由网站实现。

Android WebView滚动不流畅并且跳跃/有回拉

在 Pixel 3 和 Android Pie 上测试我的应用程序时,我发现应用程序中的 Webview 出现奇怪的滚动行为,向下或向上滚动时,滚动根本不平滑,有时会跳...

回答 2 投票 0

如何*累积*连续的`scrollBy`调用`behavior: "smooth"`来实现平滑滚动?

背景 我正在实现一项功能,按 Alt 可以使滚动速度加快 5 倍,类似于 VSCode 中的行为。下面是相关代码片段(完整代码可以在CodePen找到): /** ...

回答 1 投票 0

如何使用JavaScript为锚链接创建平滑的滚动效果?

平滑滚动仅有效一次: 第一个锚链接工作正常,但之后的链接会导致页面跳转而不是平滑滚动。 我正在尝试在我的

回答 1 投票 0

如何使用animation-timeline属性添加延迟或平滑滚动驱动的动画?

我目前正在使用CSS滚动驱动的动画和新的animation-timeline属性。我所指的技术示例可以在这里查看:图像显示示例。 然而,我面临着一个

回答 1 投票 0

在 Next.js 中,如何使链接处于活动状态并在单击时使用 ID 滚动到同一页面上的特定部分?

我想在 Next.js 中实现一个功能,其中: 当用户单击链接时,它会滚动到同一页面上的特定部分。 链接变为活动状态(例如,改变颜色、添加下划线...

回答 1 投票 0

我希望页面点击时平滑滚动到特定区域

我有一个 React 页面,标题顶部有按钮。 我想要的是当单击我的其中一个按钮时,能够使页面自动滚动到反应页面的特定位置...

回答 1 投票 0

Angular 17 中鼠标滚轮各部分之间的平滑滚动

我有一个包含多个部分的 Angular 17 应用程序,我想在用户滚动鼠标滚轮时在这些部分之间实现平滑滚动。具体来说,我想要以下行为...

回答 1 投票 0

同时实现平滑滚动、快速滚动和锚点导航

我试图在 HTML 组件上进行锚点导航时实现平滑、快速的滚动。一次只能看到一个“选项卡”。用户必须单击...

回答 1 投票 0

当我的光标位于网页上的任意位置时,如何在溢出的 Flexbox 子项中滚动?

我一直在尝试构建一个 Web 开发人员组合网站,并且正在开发一个布局,其中我的主体是一个具有两个主要元素的 Flexbox: 左边是一个基本的导航栏 右边有一个c...

回答 1 投票 0

在用户单击或触摸时停止滚动动画 | JavaScript

我有这个JS脚本: 函数scrollToTop() { constscrollTop = document.documentElement.scrollTop ||文档.body.scrollTop; 如果(滚动顶部> 0){ window.requestAnimationFrame(scrollToTop); w...

回答 1 投票 0

z-index 不适用于链接到 gsap 动画的元素

滚动图像时我无法显示固定按钮,我尝试了不同的方法,但似乎没有任何效果,即使我 z-index:999999999999999; 图像使用 gsap 平滑滚动,现在...

回答 1 投票 0

当我单击锚点时添加偏移 Y“-100px”,它会将我向下滚动到一个元素

当我单击向下滚动到某个部分的链接时,我需要添加 -100px 的偏移量。我已经设法使滚动平滑,但无法使其以 offsetY 滚动。 这是我的js代码:

回答 2 投票 0

在没有容器的情况下在窗口上平滑/动量滚动

我正在尝试在 mac os / ios 上模拟黄油滚动,通常称为“惯性滚动”或“动量滚动”,当您浏览页面时。 我发现的一切都是如此...

回答 2 投票 0

猫头鹰旋转木马惯性滚动

我在移动网站上使用猫头鹰轮播。 当用户水平滚动然后停止时,内容立即停止移动(或停止后不久)。 是否可以添加一些我...

回答 2 投票 0

Lenis smoothscroll:在 Firefox 上元素的下拉动画后不会滚动到底部

编辑:它似乎适用于 Chrome 和 Edge。在最新的 Windows Safari 版本 (5.1.7) 上,它无法工作,因为它不支持“=>”,并且 Safari 不支持 Windows 10 更新...

回答 1 投票 0

单击平滑滚动到 ID

我的目的是实现平滑的滚动行为,但我是 JS/JQuery 的新手。 当我单击导航栏锚标记时,页面将向下滚动到具有相应 ID 的部分。为了做到这一点...

回答 2 投票 0

使用特定的平滑滚动库将类添加到 Anchor

我最近安装了来自 cferdinandi 的平滑滚动库,平滑滚动功能就像一个魅力。 使用 CMS 添加到我的文本中的锚点如下所示: 我最近安装了 cferdinandi 的平滑滚动库,平滑滚动功能就像一个魅力。 使用 CMS 添加到我的文本中的锚点如下所示: <span id="authentication" class="ancre"></span> 关于我在文本中谈论的内容,ID 每次都不同。而且效果很好。 我的问题是,平滑滚动库似乎在运行时删除了该类,因此我的 class='ancre' 在调用锚点时不会显示。班级是: .ancre:target{ background-color: #131b24; color: white; } 所以我删除了类的“target”参数,并在 JS 文件中添加了一个函数,以便在平滑滚动运行后添加该类。看起来像这样: css/app.css 中的 CSS .ancre{ background-color: #131b24; color: white; } js/app.js 中的 JS after: function () { var className = 'ancre'; document.querySelector('.' + className).classList.remove(className); document.getElementById(anchor.id).classList.add(className); } 但是它不起作用,我就是不明白为什么。 您可以通过按此页面上的“两步身份验证”和/或“移动”按钮来尝试。 您可以使用scrollIntoView javascript 函数,无需库。 https://codepen.io/gezzasa/pen/gzXPbJ/ 首先我必须将容器设置为position: relative;,然后将锚点设置为position: absolute; top: 0;。将 JS 上的选项设置为 block : 'center' 现在,它只会滚动直到锚点位于屏幕中间。 var smoothScroll = function(e, me) 是我声明的函数,并在 a 标签的 onclick 上触发。有不同的方法来运行该函数,但这很简单。我在事件的 onclick 上传入了 event(单击时触发的事件)和 this 来告诉脚本我点击了什么。 e.preventDefault() 将阻止 a 标签触发其默认函数,该函数将使用提供的 href 重新加载页面。在这种情况下,它将附加一个没有该脚本的 ID。 document.querySelector(me.getAttribute('href')) 将获取需要滚动到的 ID,然后 scrollIntoView 函数将根据您提供的选项进行滚动。 希望我解释得很好...我没有太多解释 JS 的经验。;

回答 1 投票 0

JavaScript/JQuery - 单击时平滑滚动到 ID

我的目的是实现平滑的滚动行为,但我是 JS/JQuery 的新手。 当我单击导航栏锚标记时,页面将向下滚动到具有相应 ID 的部分。为了做到这一点...

回答 2 投票 0

如何让Javascript水平平滑滚动

我正在尝试让我的代码使我的 div 水平平滑滚动。目前它只是跳转到位置。谁能告诉我我做错了什么?我已经提供了我的代码和 JSFiddle...

回答 1 投票 0

如何在react中不使用钩子更新页面滚动上的URL?

我正在尝试在 React 中创建一个平滑的滚动页面。该页面分为 4 个部分: 概述 关于我们 培训班 消息 因此,在滚动时,如果它位于 id=news 的“新闻”部分,则 URL 笑...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.