serovpochta
@serovpochta
Лысый

Скрипт запрещающий скролл страницы вне блока с контентом?

Есть рабочий скрипт, который позволяет запретить скролл снаружи блока на странице, а в блоке при этом скролл работает:

$('.chat-messages').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;
    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }
    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});


Как сделать, что бы один скрипт работал не только в одном диве .chat-messages, а в нескольких
Например пробовал так через запятую просто, но не фурычит(ну я нуб):

$('.chat-messages, .categories-list').bind('mousewheel DOMMouseScroll', function(e)


Рабочий пример: jsfiddle.net/kixkix/gkfobs3a/1

И может кто знает, как скролл в таком блоке сделать плавным, потому как он скроллица прирывно

Помогите плиз)
Спасибо за внимание
  • Вопрос задан
  • 541 просмотр
Решения вопроса 1
BBoyJuss
@BBoyJuss
WordPress, интерфейсы и все вытекающие
Сначал подумал что Да как 2 пальца, но, после тестирования решения, немного приуныл :)
Но, всё решаемо, когда хочется. Результат на JSFiddle
Протестировано в: IE10-11, Edge, Chrome, Yandex, Opera, Firefox

Инерционный скролл у блоков с overflowдля iOs устройств
-webkit-overflow-scrolling : touch;
PostCSS плагин postcss-momentum-scrolling для автоматической уктанвоки -webkit-overflow-scrolling : touch; для элементов с overflow

Вот и JavaScript код -V-
$.preventScrolling = function(selector) {
	
    $.each($(selector), function(index, element) {
    	
        var element = $(element),
            scrollDiff = null,
            wheelDelta = null,
            scrollTop  = null;
        
        element.on('mousewheel DOMMouseScroll', function(event) {
        
            /**
             * направление колёсика мыши (-1 вниз, 1 вверх)
             *
             * нормализация определения направления прокрутки
             * (firefox < 0 || chrome etc... > 0)
             * (event.originalEvent.detail < 0 || event.originalEvent.wheelDelta > 0)
             */
            wheelDelta = (event.originalEvent.detail < 0 || event.originalEvent.wheelDelta > 0) ? 1 : -1;
            scrollDiff = element[0].scrollHeight - element.outerHeight(); // высота скролла
            scrollTop  = element[0].scrollTop; // позиция скролла
            
            if ((scrollTop >= scrollDiff && wheelDelta < 0) || (scrollTop <= 0 && wheelDelta > 0)) {
                event.preventDefault();
            }
        });
        
    });

};

$.preventScrolling('.scroller-block_first, .scroller-block_second');

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы