Как я могу настроить панель прокрутки окна браузера или панель прокрутки div для прокрутки с помощью анимации и scrollTop?

Общая идея для сайта, который я проектирую, - это прокручивать набор элементов меню по горизонтали и поэтапно под статическим div, который увеличит (увеличит размеры и размер pt) содержимое элементов меню. Мне не нужна помощь с увеличением, потому что я думаю, что это так же просто, как добавление mag-класса в любой из divs menuItem, которые идут под статическим div. Я уже несколько месяцев возился с этим, и код, который у меня есть для постепенной прокрутки, до сих пор таков:

$(document).ready(function () { currentScrollPos = $('#scrollableDiv').scrollTop(120); //sets default scroll pos /*The incrementScroll function is passed arguments currentScrollPos and UserScroll which are variables that i have initiated earlier in the program, and then initiates a for loop. -The first statement sets up the variables: nextScrollPos as equal to the currentScrollPos(which by default is 120px) plus 240px(the distance to next menuItem), prevScrollPos as equal to the currentScrollPos(which by default is 120px) minus 240px(the distance to next menuItem). -The second Statement checks to see if the user has scrolled using var userScroll -The third statement sets: var CurrentScroll equal to the new scroll position and var userScroll to false*/ function incrementScroll(currentScrollPos, userScroll) { for (var nextScrollPos = parseInt(currentScrollPos + 240, 10), prevScrollPos = parseInt(currentScrollPos - 240, 10); //end first statement userScroll == 'true'; console.log('dude'), //end second statement and begining of third currentScrollPos = scrollTop(), userScroll = 'false') { if (scrollTop() < currentScrollPos) { $('#scrollableDiv').animate({ scrollTop: (parseInt(prevScrollPos, 10)) }, 200); console.log('scrolln up') } else if (scrollTop() > currentScrollPos) { $('#scrollableDiv').animate({ scrollTop: (parseInt(nextScrollPos, 10)) }, 200); console.log('scrolln down')//fire when } } } $('#scrollableDiv').scroll(function () { userScroll = 'true'; _.debounce(incrementScroll, 200); //controls the amount of times the incrementScroll function is called console.log('straight scrolln') });
});

Я нашел множество решений, которые почти близки: например, плагин, который привязывается к следующей или предыдущей демонстрационной горизонтальной демонстрационной версии, другое решение, которое также привязывается и основано на демонстрации setTimeout, но ничто из того, что гвоздь постепенно не прокручивается через div. Я также нашел способ контролировать скорость, с которой пользователь может прокручивать элементы меню, используя debounce, который включен в вышеуказанный код.

Консоль.logs внутри цикла не срабатывает, когда я воспроизвожу код в jsfiddle, что заставляет меня думать, что проблема лежит внутри цикла. Я ноб, хотя это может быть синтаксис или где-либо еще в коде. Также во втором демо я предоставил css для горизонтального статического div, но в тот момент, когда я помещал его в свой html, он не позволяет js работать.

Я хотел бы написать код вместо использования плагина, и любая помощь будет оценена! Кроме того, спасибо заранее!

1 ответ

Попробуйте эту скрипку. Высота контейнера меню составляет 960 пикселей для отображения 4 пунктов меню. Дистанция "Масштаб" позиционируется абсолютно наверху. Когда вы прокручиваете мышь над этим div, пункты меню перемещаются в верхнее/нижнее. Мне пришлось добавить дополнительный div в нижнюю часть, чтобы прокручивать до последних 3 пунктов меню. Код JS:

jQuery(document).ready(function($){ var current = 0; var menu = $('.menu-container').scrollTop(0); var items = menu.find('.menu-item'); var zoom = $('.zoom'); function isVerticalScroll(event){ var e = event.originalEvent; if (e.axis && e.axis === e.HORIZONTAL_AXIS) return false; if (e.wheelDeltaX) return false; return true; } function handleMouseScroll(event){ if(isVerticalScroll(event)){ var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail; current += (delta > 0 ? 1 : -1); if(current < 0) current = 0; if(current >= items.length){ current = items.length - 1; } menu.stop().animate({ "scrollTop": current * 240 }, 300); items.removeClass('current').eq(current).addClass('current'); event && event.preventDefault(); return false; } } zoom.on({ "MozMousePixelScroll": handleMouseScroll, "mousewheel": handleMouseScroll });
});

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

licensed under cc by-sa 3.0 with attribution.