终！极！网页横向滑动效果📕教程📕

合集 · 前端教程 (23)

Description

视频中的演示网页视频: BV1ocNLzvEzh
横向滑动原理视频: BV1uW4y1c7LW
sticky定位MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
ScrollTrigger官方文档: https://gsap.com/docs/v3/Plugins/ScrollTrigger
源代码链接: https://github.com/JIEJOE-WEB-Tutorial/007-03-horizontal-scrolling-scrolltrigger
喜欢这个视频的话，就点个赞吧❤

Comments

小哼开摆 2025-07-04

学好这个能做哪部分工作啊

♥ 15 ↩ 5

八月份的凉宫 2025-07-04

up多做点技术点分享啊，国内前沿点的网页设计讲的人真不多，支持支持[打call]啥时候讲讲响应式设计的思路和移动端适配方案就好了[doge]

♥ 14 ↩ 1

珠颈斑鸡 2025-07-02

南孚电池海外版官网横向滑动+3js那个效果是真的惊艳

♥ 10 ↩ 5

夏有春光暖无疑丶 2025-07-04

看起来复杂，实则一点都不简单！

♥ 3 ↩ 1

糗糗啊 2025-07-04

当粘性定位生效以后就一直黏在top 0的位置了，为啥滚动快到底部的时候又不黏了呢没在视频里看见取消粘性定位的方法

♥ 3 ↩ 1

clay_ex 2025-12-06

[doge]我选择animejs

♥ 2 ↩ 1

珍重别沾一香一瓣 2025-08-27

请问视频里的插件可以商用吗

♥ 2 ↩ 1

AxoeS 2025-08-17

昨天看到一个很有意思的想法就是只利用一个rotate，将蓝色的纵向滚动给旋转变成横向，然后将粉色的嵌套进去[笑哭]。这样可以省去很多逻辑，jiejoe有空可以试一下

♥ 2 ↩ 4

这好像是个小号吧 2025-07-08

牛的up，我照着抄了一遍，效果很好

♥ 2 ↩ 1

YouM231 2025-07-03

大佬网站是纯原生js还是用了js框架了

♥ 2 ↩ 1

Blockcraft 2025-07-03

文字功底不好，只能说66666

♥ 2 ↩ 1

西红柿和potato 2025-07-02

还有一个点是横向的wrapper的高度得是100vh或者100vh-导航栏高度[doge]

♥ 2 ↩ 1

安创忧蓝 2025-07-02

有没有横向无缝循环滚动的教程

♥ 2 ↩ 8

神秘红光人 2025-07-02

秒吃

♥ 2 ↩ 2

月-华-白 2026-04-08

为什么获取宽度时总会报错说Uncaught (in promise) TypeError: Cannot read properties of null (reading 'offsetWidth')

♥ 1 ↩ 5

玄景龙official 2026-01-29

wrapper的高度难道不是是任何值都行吗？因为你横向滚动了多少本来就是用竖向滚动了多少的百分比算的，wrapper的高度如果是个很大的值，那只会你滚动了半天横向只滚动了一点，又不会你横向滚动完了但是wrapper没竖向滚动完

♥ 1 ↩ 1

APPerson 2025-12-09

您好，我在实现的时候出现了一些问题，请您帮我看一下我对应的解决办法可行与否(已使用视频中类名代替) 1.cardsbox_card并未像预期那样撑开cardsbox，所以我将cardsbox设置为display:inline-flex(原先cardsbox_card在cardsbox在devtools中选中后有黄色斜线覆盖) 2当窗口width等于cardsbox的width时，此时wrapper的height为0，会遮挡下方内容，所以我将更改设置wrapper的height部分代码为this.wrapper.style.height = `max(${this.distance}px, 100vh)` 请大佬帮我看一下我这个解决办法有什么问题[脱单doge]

♥ 1 ↩ 2

URL佛系 2025-08-07

问一下up用的编辑器主题是什么呢

♥ 1 ↩ 1

KY-黯暗 2025-07-02

我的超人

♥ 1 ↩ 1

灿灿Qa 2025-07-02

前排[打call]

♥ 1 ↩ 1