scroll 相关问题

我有一个网站，其中包含一个水平溢出的元素。我希望当用户从上到下垂直滚动网站时，div 从左到右水平滚动。我有一个网站，其中包含一个具有水平溢出的 <div> 元素。我希望当用户从上到下垂直滚动网站时，div 从左到右水平滚动。在此阶段，主要内容不应移动，只有 div 应该滚动。一旦 div 完全滚动到右侧，网站的垂直滚动应该正常继续。反过来也应该如此。我尝试使用 ScrollMagic 进行固定，但是在尝试固定主要内容容器时遇到卡顿： https://codepen.io/oelrim/pen/ZEGWvOK 还有其他插件可以实现我想要的吗？试试这个： var scene = document.querySelector('#sec-2'); var rect = document.querySelector('#rect'); var startEffect = scene.getBoundingClientRect().top + window.scrollY; var effectLength = 500; scene.style.marginBottom = effectLength +'px'; window.addEventListener('scroll', function(e){ var effect = window.scrollY - startEffect; if(effect > 0 && effect < effectLength) { scene.style.marginTop = effect+'px'; scene.style.marginBottom = effectLength-effect+'px'; rect.style.left = effect * (scene.offsetWidth-rect.offsetWidth) /effectLength+'px'; } else if (effect < 0) { scene.style.marginTop = 0; scene.style.marginBottom = effectLength+'px'; rect.style.left = 0; } else { scene.style.marginTop = effectLength+'px'; scene.style.marginBottom = 0; rect.style.left = (scene.offsetWidth-rect.offsetWidth)+'px'; } }); html, body {padding:0;margin:0} #sec-1 { height: 100vh; background: repeating-linear-gradient(yellow 0, yellow 10px, green 10px, green 20px); } #sec-2 { position: relative; height: 100vh; background: repeating-linear-gradient(red 0, red 10px, green 10px, green 20px);} #sec-3 { height: 100vh; background: repeating-linear-gradient(red 0, red 10px, blue 10px, blue 20px);} h1 { color: white; text-shadow: 2px 2px 3px black, -2px -2px 3px black; margin: 0; } #rect { position: absolute; width: 60px; height: 60px; background-color: white; top: calc(50% - 30px); left: 0; } <div id="sec-1"> <h1>This is section 1</h1> </div> <div id="sec-2"> <h1>This is section 2</h1> <div id="rect"></div> </div> <div id="sec-3"> <h1>This is section 3</h1> </div> 很棒的片段。谢谢约瑟夫·图卡钦斯基。我知道这篇文章很旧。也许你们还在这个星球上:D 谢谢我将您的代码与光滑的滑块结合起来，计算了效果变量的模数以切换到下一张幻灯片。效果很好。今天，一位客户抱怨卡顿，这是真的，在 Windows 上切换到除 Firefox 之外的其他浏览器，在 mAcO 浏览器中我看到了卡顿。奇怪的是，随着鼠标滚轮移动缓慢，div 会向上滑动一点，然后又下降。我有一个想法，也许改变 margintop 并不是每个周期都有帮助，但这并没有按计划进行。是否有其他方法可以在咆哮时固定 div 以消除口吃？谢谢

javascript html animation scroll scrollmagic

回答 2 投票 0

Gridview 分页/滚动

我有一个 Gridview ，其行数超出了屏幕上无需滚动即可显示的行数。我将其添加到页面指令中：维护ScrollPositionOnPostback =“true” 当我点击 e...

c# asp.net gridview scroll pagination

回答 2 投票 0

使用react-xarrows水平滚动

我正在创建一个水平可滚动的 div，其中包含按钮等元素，并使用 React-xarrows 来连接这些元素。但是当我滚动 div 时。按钮正在移动，但箭头卡在...

reactjs react-hooks scroll horizontal-scrolling xarrows

回答 1 投票 0

如何用JavaScript获取滚动条位置？

我正在尝试使用 JavaScript 检测浏览器滚动条的位置，以决定当前视图在页面中的位置。我的猜测是我必须检测轨道上的拇指在哪里，并且......