javascript - 在特定元素的某个点将垂直滚动更改为水平滚动
问题描述
上下文是什么?
我有一个网站,它是一个页面,我将在其中展示我的活动和项目 滚动几个部分后,我们连续有一个项目。
我想做的事 ?
当我们到达我的项目行时,我想将垂直滚动交换到水平。当你在行的末尾时,它只需要通过垂直滚动恢复正常。
编码
<div className="projectsContainer"> // <--- height 100vh
<div className="row projects"> // <--- Positioned in the middle of the parent ↑
<project1 />
<project2 />
<project3 />
<project4 />
<project5 />
</div>
</div>
我的代码是什么?和我的想法
我有一个inTheMiddle()
布尔方法。如果<div className="row projects">
在视口中间,则返回true
else false
。
一种scrollDirection()
布尔方法,true
当滚动向上时向下滚动false
。
许多不同的方法disableScroll()
最后 disableScroll()
一种方法通过重新计算取消滚动
componentDidMount() {
window.addEventListener('wheel', (this.handleScroll));
}
...
disableScroll() {
// Get the current page scroll position
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
// if any scroll is attempted, set this to the previous value
window.onscroll = () => {
window.scrollTo(scrollLeft, scrollTop);
};
}
我的 handleScroll() 方法管理所有这些
handleScroll(event) {
const rowProjects = document.querySelector(".row.projects")
const projectsContainer = document.querySelector(".projectsContainer")
const isSticky = rowProjects.classList.contains("sticky")
// isSticky is useless now was try by adding position fixed and no need to use disableScroll()
if (this.inTheMiddle() && this.state.scrollDown && this.state.count < 1400 ) {
this.disableScroll()
this.setState({ count: this.state.count + 10 })
rowProjects.scroll(this.state.count, 0)
} else if ((!this.state.scrollDown) && this.state.count > 0) {
this.setState({ count: this.state.count - 10 })
rowProjects.scroll(this.state.count, 0)
}
}
我无法做到的是恢复正常。当您到达行尾时,我无法重新滚动,也无法向上滚动到页面顶部。它卡在项目行上。
isSticky
我通过删除并添加了一个位置固定的类来管理它,disableScroll()
但问题是它反弹了。因为当它在中间时,我固定在视口的中间,所以元素不再处于相对位置,所以它像故障一样弹跳(就像取下堆栈块的一块)对不起这个不好的例子:')
如果您有任何想法可以帮助我,那将是非常友好的。我挠了 3 天,但我仍然没有找到完美的解决方案。
解决方案
这应该可以正常工作。您可以进行垂直滚动并使用 window.scrollY 值通过在 element.style.left 中分配它的值来水平移动元素,从而给它一个水平滚动效果。我做了同样的事情并且它有效
(全屏查看结果)。
var content = document.getElementById('content_2');
window.addEventListener('scroll', function() {
var scrolledY = window.scrollY;
var scrolledX = window.scrollX;
if (scrolledY > 625 && scrolledY < 3112) {
content.style.marginTop = 150 + 'px';
content.style.position = "fixed";
content.style.top = scrolledY * 0.001 + 'px';
content.style.left = -(scrolledY - 625) * 0.55 + 'px';
}
if (scrolledY <= 625) {
content.style.position = "initial";
}
if (scrolledY >= 3112) {
content.style.position = "absolute";
content.style.top = 3112 + 'px';
}
});
* {
margin: 0px;
padding: 0px;
font-family: 'Arial';
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
min-height: 4400px;
}
.content_1,
.content_2 {
height: 100vh;
width: 100vw;
}
.content_1 {
background-color: black;
color: white;
}
.content_1 h1 {
font-size: 200px;
text-align: center;
}
.content_2 {
margin-top: 150px;
top: 625px;
white-space: nowrap;
display: flex;
height: 80vh;
width: 200vw;
position: fixed;
flex-direction: row;
flex-wrap: nowrap;
}
.content_3 {
font-size: 20px;
margin-top: 3050px;
}
.card {
background-color: red;
color: white;
white-space: nowrap;
text-align: center;
height: 300px;
width: 300px;
margin: 10px 30px 10px 10px;
}
<div class="content_1">
<h1>First Page</h1>
</div>
<div class="content_2" id="content_2">
<div class="card" style="background-color: #FF7A7A;">Card-1</div>
<div class="card" style="background-color: #FF3C3C;">Card-2</div>
<div class="card">Card-3</div>
<div class="card" style="background-color: #FF3600;">Card-4</div>
<div class="card" style="background-color: #FF871C;">Card-5</div>
<div class="card" style="background-color: #FFA91C;">Card-6</div>
<div class="card" style="background-color: #FFC11D;">Card-7</div>
<div class="card" style="background-color: #FFF81D;">Card-8</div>
</div>
<div class="content_3">
<p>Senectus purus, molestie blandit sociis eu leo blandit platea commodo aptent scelerisque cursus. Hac vel himenaeos hendrerit eu pellentesque. Lorem natoque praesent dictum porta, aliquam bibendum laoreet class litora? Class nullam maecenas aliquet.
Ligula, et enim vel rutrum luctus lorem orci fringilla in erat? Bibendum magnis nec volutpat non netus dignissim. Tempus tempor penatibus nulla egestas semper scelerisque cubilia. Nulla adipiscing per porta consequat et imperdiet posuere magna fringilla
rhoncus conubia. Sapien proin euismod.
</p>
<p>Tempus luctus tempor donec pretium lectus leo facilisis leo, inceptos nostra lorem vel. Orci parturient urna etiam pharetra sit lacus volutpat id sed lacinia. Scelerisque ultrices nisi risus aenean tincidunt, amet arcu tempus id curabitur purus fringilla.
Eros iaculis vitae vitae rutrum ultricies dolor sociis ante ante ut. Ut nibh primis himenaeos egestas dictumst congue scelerisque!
</p>
<p>Blandit sociis quisque ultrices montes tortor. Penatibus risus primis, senectus nam nostra. Egestas, nulla vitae penatibus cursus sed. Luctus, eget dignissim porttitor et curae; accumsan. Accumsan blandit ligula sollicitudin. Ligula mattis ad turpis
arcu mus laoreet conubia risus accumsan quis lobortis. Nisi sollicitudin penatibus lacus nam justo id commodo sagittis. Leo orci.
</p>
<p>Fringilla sociosqu laoreet id, dui lobortis condimentum? Facilisis non, cubilia diam. Egestas aptent ornare et felis morbi senectus molestie, egestas donec himenaeos ultrices himenaeos. Condimentum conubia nisl urna lobortis pharetra adipiscing cras
eget pellentesque sollicitudin faucibus. Scelerisque lobortis nascetur neque ac quam dignissim fames. Magnis pharetra dignissim nullam sapien eu curabitur, ridiculus dapibus. Aptent tempus nibh eget scelerisque magna ipsum turpis. Taciti nostra morbi
pharetra montes sagittis posuere mollis.
</p>
<p>Taciti tortor phasellus placerat inceptos tristique consectetur accumsan vitae potenti sodales nulla eros. Dapibus scelerisque penatibus nisl accumsan ultricies ridiculus porta. Varius tellus erat laoreet morbi tempor tristique. Sapien, sem morbi libero
dapibus curabitur. Facilisi habitasse feugiat semper magnis risus id tellus libero semper. Vehicula turpis elit lectus interdum metus ultrices mollis consectetur cubilia.
</p>
<p>Senectus purus, molestie blandit sociis eu leo blandit platea commodo aptent scelerisque cursus. Hac vel himenaeos hendrerit eu pellentesque. Lorem natoque praesent dictum porta, aliquam bibendum laoreet class litora? Class nullam maecenas aliquet.
Ligula, et enim vel rutrum luctus lorem orci fringilla in erat? Bibendum magnis nec volutpat non netus dignissim. Tempus tempor penatibus nulla egestas semper scelerisque cubilia. Nulla adipiscing per porta consequat et imperdiet posuere magna fringilla
rhoncus conubia. Sapien proin euismod.
</p>
<p>Tempus luctus tempor donec pretium lectus leo facilisis leo, inceptos nostra lorem vel. Orci parturient urna etiam pharetra sit lacus volutpat id sed lacinia. Scelerisque ultrices nisi risus aenean tincidunt, amet arcu tempus id curabitur purus fringilla.
Eros iaculis vitae vitae rutrum ultricies dolor sociis ante ante ut. Ut nibh primis himenaeos egestas dictumst congue scelerisque!
</p>
<p>Blandit sociis quisque ultrices montes tortor. Penatibus risus primis, senectus nam nostra. Egestas, nulla vitae penatibus cursus sed. Luctus, eget dignissim porttitor et curae; accumsan. Accumsan blandit ligula sollicitudin. Ligula mattis ad turpis
arcu mus laoreet conubia risus accumsan quis lobortis. Nisi sollicitudin penatibus lacus nam justo id commodo sagittis. Leo orci.
</p>
<p>Fringilla sociosqu laoreet id, dui lobortis condimentum? Facilisis non, cubilia diam. Egestas aptent ornare et felis morbi senectus molestie, egestas donec himenaeos ultrices himenaeos. Condimentum conubia nisl urna lobortis pharetra adipiscing cras
eget pellentesque sollicitudin faucibus. Scelerisque lobortis nascetur neque ac quam dignissim fames. Magnis pharetra dignissim nullam sapien eu curabitur, ridiculus dapibus. Aptent tempus nibh eget scelerisque magna ipsum turpis. Taciti nostra morbi
pharetra montes sagittis posuere mollis.
</p>
<p>Taciti tortor phasellus placerat inceptos tristique consectetur accumsan vitae potenti sodales nulla eros. Dapibus scelerisque penatibus nisl accumsan ultricies ridiculus porta. Varius tellus erat laoreet morbi tempor tristique. Sapien, sem morbi libero
dapibus curabitur. Facilisi habitasse feugiat semper magnis risus id tellus libero semper. Vehicula turpis elit lectus interdum metus ultrices mollis consectetur cubilia.
</p>
</div>
推荐阅读
- lua - Lua ffi.load 找不到没有绝对路径的库
- temporary-objects - 临时物化转换 - 术语和概念的混淆
- python - 如何使用 scala 进程实用程序发送 EOF
- javascript - 如何在单击特定选项卡后立即为折线图制作动画?
- sql - 如何处理`|| chr(38) ||` 在 SQL 服务器中
- azure - 使用静态令牌连接到动态
- java - 如何在 Rapidminer 中将 ArrayList 转换为 ExampleSet?
- flutter - 路透社或彭博社的 RSS 商业新闻提要是否有用于颤振的 xml 网址?
- python - Matplotlib 中表格周围的空格
- php - 在 Woocommerce 中移动结帐运输选项