将垂直滚动方向更改为水平
change vertical scrolling direction to horizontal
我正在做一个项目,我想改变我的滚动方向,就像下面的图片一样,也让部分的宽度与下面的ID一样#left, #middle, #right below是我的代码
<style>
section{margin: 0;padding: 0;height: 100vh;}
section:nth-of-type(1n) {width: 100%;height: 100vh;background-color: #fc1c1c;}
section:nth-of-type(2n) {width: 100%;height: 100vh; background-color: #FE4B74;}
section:nth-of-type(3n) {width: 5840px;background-color: #fcfcfc;}
#left, #middle, #right {display: inline-block;}
#left {max-width:100%; width: 1920px; height: 100vh; background: blue; padding:10px;}
#middle {max-width:100%; width: 1920px; height: 100vh; background: green; padding:10px;}
#right {max-width:100%; width: 1920px; height: 100vh; background: yellow; padding:10px;}
section:nth-of-type(4n) {width: 100%;background-color: #e21cfc;}
</style>
<script src="jquery-2.1.1.min.js"></script>
<script type='text/javascript' src='jquery.mousewheel.min.js'></script>
<section><p>Content Here</p></section>
<section><p>Content Here</p></section>
<section>
<div id="left">Content Here</div>
<div id="middle">Content Here</div>
<div id="right">Content Here</div>
</section>
<section><p>Content Here</p></section>
<script>
scrollVert();
var scrollLeft=0;
function scrollVert() {
$('html, body, *').off('mousewheel').mousewheel(function(e, delta) {
this.scrollTop -= (delta * 40);
e.preventDefault();
setTimeout(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height())
scrollHoriz();
}, 0)
});
}
function scrollHoriz() {
$('html, body, *').off('mousewheel').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
scrollLeft=this.scrollLeft
setTimeout(function() {
if (scrollLeft == 0) scrollVert();
}, 0)
});
}
</script>
我认为最适合您的情况的解决方案是 ScrollMagic。它们提供了许多滚动功能(非常灵活)和其他功能,例如轻巧且响应迅速。
至于有一些水平滚动的 sectinos,他们有这个很好的演示:http://atintell.com 可以按照您的描述进行操作。
希望对您有所帮助。
我正在做一个项目,我想改变我的滚动方向,就像下面的图片一样,也让部分的宽度与下面的ID一样#left, #middle, #right below是我的代码
<style>
section{margin: 0;padding: 0;height: 100vh;}
section:nth-of-type(1n) {width: 100%;height: 100vh;background-color: #fc1c1c;}
section:nth-of-type(2n) {width: 100%;height: 100vh; background-color: #FE4B74;}
section:nth-of-type(3n) {width: 5840px;background-color: #fcfcfc;}
#left, #middle, #right {display: inline-block;}
#left {max-width:100%; width: 1920px; height: 100vh; background: blue; padding:10px;}
#middle {max-width:100%; width: 1920px; height: 100vh; background: green; padding:10px;}
#right {max-width:100%; width: 1920px; height: 100vh; background: yellow; padding:10px;}
section:nth-of-type(4n) {width: 100%;background-color: #e21cfc;}
</style>
<script src="jquery-2.1.1.min.js"></script>
<script type='text/javascript' src='jquery.mousewheel.min.js'></script>
<section><p>Content Here</p></section>
<section><p>Content Here</p></section>
<section>
<div id="left">Content Here</div>
<div id="middle">Content Here</div>
<div id="right">Content Here</div>
</section>
<section><p>Content Here</p></section>
<script>
scrollVert();
var scrollLeft=0;
function scrollVert() {
$('html, body, *').off('mousewheel').mousewheel(function(e, delta) {
this.scrollTop -= (delta * 40);
e.preventDefault();
setTimeout(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height())
scrollHoriz();
}, 0)
});
}
function scrollHoriz() {
$('html, body, *').off('mousewheel').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
scrollLeft=this.scrollLeft
setTimeout(function() {
if (scrollLeft == 0) scrollVert();
}, 0)
});
}
</script>
我认为最适合您的情况的解决方案是 ScrollMagic。它们提供了许多滚动功能(非常灵活)和其他功能,例如轻巧且响应迅速。
至于有一些水平滚动的 sectinos,他们有这个很好的演示:http://atintell.com 可以按照您的描述进行操作。
希望对您有所帮助。