изменить вертикальное направление прокрутки на горизонтальное - PullRequest
Новая
       38

изменить вертикальное направление прокрутки на горизонтальное

1 голос
/ 23 марта 2019

Я работаю над проектом, и я хочу изменить направление прокрутки на то же, что и на изображении ниже, а также сделать ширину сечения такой же со следующим ID #left, #middle, # right код enter image description here

<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>

Спасибо за вашу помощь

1 Ответ

1 голос
/ 23 марта 2019

Я думаю, что лучшим решением для вашего случая будет ScrollMagic .Они предлагают много функций прокрутки (очень гибкие) и другие функции, такие как легкий и все еще отзывчивый.

Что касается некоторых сектино, которые прокручиваются по горизонтали, у них есть замечательная демонстрация: http://atintell.com, которая делает то, что вы описываете.

Надеюсь, что поможет.

...