Горизонтальная прокрутка с колесом мыши

Question

Я разработал горизонтальный веб-сайт, разделенный на элементы (как id #, так и .class). JS позволяет мне прокручивать по горизонтали с помощью колеса мыши, но я бы хотел либо прокрутить в процентах (например, 50% влево или вправо), либо в предыдущий или следующий элемент.

$(function() { 
$("#wrapper").mousewheel(function(event, delta) { 
this.scrollLeft -= (delta * 100); 
event.preventDefault(); 
}); 
}); 

TNX

Answer 1

Ну вы можете использовать this для прокрутки по горизонтали. Вы можете использовать это, чтобы перейти к страницам:

Чтобы получить ширину вашей страницы HTML вы можете использовать $ (документ) .width();

Затем вы можете разделить это по ширине порта просмотра, используя $ (window) .width() ;. Итак:

window.addEventListener("resize", pageResize); 

var pageResize = function(){ 
    viewWidth = $(window).width();  //no var to make the variable global 
    pageHeight = $(document).width(); //no var to make the variable global 
    numberOfPages = pageWidth/viewWidth; //no var to make the variable global 
} 
var goToPage = function(page){ 
    window.scrollTo((page-1)*viewport, 0); 
} 

Или перейти к объекту, вы можете использовать:

Просто передайте в идентификатор элемента, который вы хотели бы перейти.

var nav = function(l){ 
    var left = $("#"+l+"").offset().left; //Getting X of target element 
    window.scrollTo(left, 0); 
} 

Вам придется адаптировать некоторые из этого кода, чтобы работать именно так, как вы хотите с вашей веб-странице.

Не уверен, что это отвечает на ваш вопрос. Если нет, не стесняйтесь, дайте мне знать, чтобы я мог его отредактировать.