Как сделать горизонтальную прокрутку на сайте?

#javascript #jquery #slickjs #owl_carousel #mootools

С помощью чего можно реализовать горизонтальную прокрутку, как на этом сайте?

https://www.adveris.fr/voeux2015/
    

Ответы

Ответ 1

На нативном js примерно так



function scrollHorizontally(e) { //включает горизонтальный скрол элемента колесом
    e = window.event || e;
		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); //это шаг колеса
для разных браузеров
    document.documentElement.scrollLeft -= (delta * 40); //прокручиваем всю страницу
		e.preventDefault();
	};
  
function addMouseWell(elem, callback) { //вешает кроссплатформенный обработчик на
колесо мыши над элементом
	if (elem.addEventListener) {
		if ('onwheel' in document) {
			elem.addEventListener("wheel", callback);
		} else if ('onmousewheel' in document) {
			elem.addEventListener("mousewheel", callback);
		} else {
			elem.addEventListener("MozMousePixelScroll", callback);
		}
	} else {
		elem.attachEvent("onmousewheel", callback);
	}
}

addMouseWell(window, scrollHorizontally);
body {
  overflow:hidden;
  max-width:100%;
}

#wide {
  width:3000px;
}

  
Очень широкий контейнер. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quibusdam sit libero beatae vitae placeat, culpa similique, at fugit est eum
distinctio cupiditate asperiores! Laborum, porro, exercitationem! Veritatis ea quisquam
repudiandae.
Deserunt unde iste placeat eaque. Error adipisci temporibus neque inventore ratione
dicta quasi, ipsa corrupti alias distinctio nam quibusdam magni cumque, rem possimus
officiis optio laudantium minima amet soluta eligendi. Quis, earum. Vitae eum cupiditate
consequatur pariatur quis voluptatibus, dignissimos nam recusandae voluptatem repellendus
exercitationem excepturi fugiat, obcaecati nostrum libero quaerat. Magni dolorem, deleniti
tempore quas similique distinctio quam animi.
Fugit nihil dolor dolores eos quidem quas, culpa fugiat amet expedita consectetur
provident corporis blanditiis obcaecati tempora eum, repellendus quam! Aliquam quos
pariatur, dignissimos dolor velit quo illum, fugit hic? Praesentium, aliquid id omnis
nesciunt alias deleniti obcaecati ipsa doloremque itaque harum earum assumenda, fuga
quisquam quia voluptate necessitatibus consequatur soluta maxime. Fuga quas autem debitis
earum dicta repellendus illum.



Ответ 2

$(function () {
  $('.slider').slick({
    arrows: false
  });
  
  $('.slider').mousewheel(function (e) {
    if (e.deltaY !== 1) {
      $('.slider').slick('slickNext');
    } else {
      $('.slider').slick('slickPrev');
    }
    
    e.preventDefault();
  });
});
body {
  margin: 0;
}

.slider {
  width: 100vw;
  height: 100vh;
}

.slick-list,
.slick-track {
  width: 100%;
  height: 100%;
}

.slider__item {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.slider__item span {
  margin: auto;
  height: 100%;
  font-family: sans-serif;
  font-size: 32px;
  align-items: center;
  justify-content: center;
  display: flex;
}






  
1
  
2
  
3
  
4