跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
scrolling

35 篇文章
{
,

}
文章“双向滚动:有什么不好的?”的直链
水平滚动 滚动

双向滚动:有什么不好的?

来自 Adam Silver 的一些小熊思考……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 11 月 6 日
文章“如何制作一个不显眼的滚动到顶部按钮”的直链
按钮 scroll-behavior 滚动

如何制作一个不显眼的滚动到顶部按钮

一个返回页面顶部的按钮允许用户快速返回页面顶部,而无需花费太多精力。当页面内容很多时,这非常有用……

Avatar of Marcel Rojas
Marcel Rojas 于 2020 年 10 月 5 日
文章“滚动时出现毁灭伤害闪光”的直链
滚动

滚动时出现毁灭伤害闪光

电子游戏《毁灭战士》在玩家受到攻击时会以红色闪烁屏幕。Chris Johnson 不仅借鉴了这个想法,还将《毁灭战士》中的许多 UI 融入到这个名为 Doom Scroller 的俏皮 JavaScript 库中。获取…

Avatar of Chris Coyier
Chris Coyier 于 2020 年 8 月 25 日
文章“这就是我的滚动方式”的直链
滚动条 滚动 用户体验

这就是我的滚动方式

你怎么知道一个页面(或页面上的任何元素)是否可以滚动?好吧,如果它有滚动条,这是一个很好的指示。你可能仍然需要与你的客户争论“页面折叠”或其他什么,但我…

Avatar of Chris Coyier
Chris Coyier 于 2020 年 8 月 14 日
文章“记住跨页面加载的滚动位置”的直链
滚动

记住跨页面加载的滚动位置

Hakim El Hattab 在推特上发布了一个非常棒的小型用户体验增强功能,适用于包含可滚动导航侧边栏的静态网站。…

Avatar of Chris Coyier
Chris Coyier 于 2020 年 7 月 9 日
文章“我如何将滚动百分比放入浏览器标题栏”的直链
滚动

我如何将滚动百分比放入浏览器标题栏

来自 Knut Melvær 的一些不错的技巧。

最终,这个技巧归结为计算你在页面上滚动了多远,并将标题更改为显示它,例如

document.title = `${percent}% ${post.title}`

Knut 的技巧假设使用 React 并安装 一个…

Avatar of Chris Coyier
Chris Coyier 于 2020 年 5 月 12 日
文章“使用 CSS 指示页面上的滚动位置”的直链
滚动 粘性

使用 CSS 指示页面上的滚动位置

滚动是我们所有人都知道并在网络上做的事情,以至于它成为了一种期望,或者可能是一种习惯,就像刷牙一样。这可能是我们没有过多考虑滚动设计的原因…

Avatar of Preethi
Preethi 于 2020 年 3 月 24 日
文章“移动彩虹下划线”的直链
自定义属性 彩虹 滚动

移动彩虹下划线

我非常喜欢 Sandwich 网站的设计。在众多漂亮的功能中,这些标题带有彩虹下划线,它们会随着滚动而移动。这不是滚动劫持——它只是一个次要的设计功能,使用滚动位置来…

Avatar of Chris Coyier
Chris Coyier 于 2019 年 12 月 23 日
文章“需要滚动到页面顶部?”的直链
无障碍 滚动

需要滚动到页面顶部?

也许向用户提供此功能的最简单方法是一个链接,该链接指向 <html></html> 元素上的 ID。所以就像…

<html id="top">
  <body>
     <!-- the entire document -->
     <a href="#top">Jump to top of page</a>
  </body>
</html>

但是…

Avatar of Chris Coyier
Chris Coyier 于 2019 年 9 月 2 日
  • 更新
  • 1
  • 2
  • 3
  • ...
  • 4
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.