Как сделать плавный скролл по window.scroll() без jquery?

Question

[sqr_behr]

Пишу слайдер на нативном JS. Для того, чтобы не глючили тачи, отрубил их через event.preventDefault() и event.stopPropagation(). Написал свайп для оси X, а вот вернуть нормальный скролл на Y не получается.
Чтобы сделать хоть какой-то скролл - плюсую разницу между текущей и начальной точкой Х к текущей позиции документа... Закидываю изменения топа в touchmove или touchend - плавного скролла нет.

Помогите вернуть скролл :( Или скажите как его сделать плавным?.. JQuery не предлагать.

Answer 1

[Дмитрий Носиков]

Отлавливай событие скролла мышью, проверяй, в какую сторону мышкой крутит пользователь и вызывай функцию, в которой у тебя есть несколько переменных, допустим:

let scrollValue = 100,; //Величина прокрутки за 1 раз в пикселях
     scrolltime = 60,; //Время прокрутки в секундах
     scrollSpeed = parseFloat(scrollValue/scrollSpeed); //Скорость скролла

А дальше в функции устанавливаешь какой-нибудь setInterval() который будет у тебя раз в секунду , допустим, прокручивать страничку на ScrollValue. Что-нибудь в таком духе. На 100% правильность не претендую, но, думаю, мысль понятна)

Вот есть старенький код, которым я когда-то давно пользовался:

//скролл
function SoftScroll () {
	var _this = this;
	window.onmousewheel = function () { return _this.catchScroll(window.event) };
	this.speed = 0;
	this.current = 0;
	this.time = 100;
	this.direction;
	this.timer = false;
}
SoftScroll.prototype = {
	catchScroll: function (e) {
		this.speed += 100;
		if(e.wheelDelta > 0) this.direction = 'up';
		else this.direction = 'down';
		this.timerScroll();
		return false;
	},
	timerScroll: function () {
		_this = this;
		if(_this.timer == true) return;
		_this.timer = true;
		_this.timerId = setInterval(function () {
			var increment = Math.sqrt(_this.speed) / 2.5;
			_this.current += increment;
			if(_this.current > _this.speed) _this.current = _this.speed;
			var y = -Math.pow(_this.current - _this.speed / 2, 2) / Math.pow(_this.speed / 2, 2) * increment + increment;
			if(_this.direction == 'up') y = -y;
			_this.doScroll(Math.floor(y));
			if(y == 0) {
				_this.timer = false;
				_this.speed = 0;
				_this.current = 0;
				clearInterval(_this.timerId);
			}
		}, 10);
	},
	doScroll: function (scroll) {
		document.body.scrollTop = document.body.scrollTop + scroll;
		document.documentElement.scrollTop = document.documentElement.scrollTop + scroll;
	}
}

Comments

[sqr_behr]

Спасибо за пример, на его базе выстроил скролл для тача.
Но есть вопрос. Почему скорость и множитель рассчитываются именно таким образом? Чем вы руководствовались? Очень интересно :)

[Дмитрий Носиков]

sqr_behr: Не могу сказать, по той простой причине, что код был написан больше 3 лет назад) Когда я ещё начинал только программировать) Поэтому, к сожалению, не отвечу на Ваш вопрос)) Если покажите Ваше решение, более оптимальное или правильное, буду благодарен)

[sqr_behr]

Дмитрий Носиков: Пока что только придумалось. Но до реализации нормального скролла на мобильных устройствах, чую, мне ещё далеко. Анимация похожая, но, увы до приемлемого результата ещё далеко... Разница со штатным скроллом по тачу очень ощутима.

// t: currentTime
// b: startValue
// c: change in value
// d: duration

Math.easeInOutQuad = function(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return -c / 2 * t * t + b;
    t--;
    return c / 2 * (t * (t - 2) - 1) + b;
};

function SwipeScroll() {
    this.scrolled = 0;
    this.newPosition = 0;
    this.interval = null;
    this.speed = 0;
    this.swipeTo();
}

SwipeScroll.prototype.swipeTo = function() {
    document.documentElement.scrollTop = 1;

    var element = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement : document.body;
    var start = element.scrollTop;
    var change = otk.y; // разница между начальным положением тача и конечным. Отлавливается на touchstart и touchend
    var currentTime = 0;
    var increment = 20;
    var duration = 300;

    function animateScroll() {
        currentTime += increment;

        var val = Math.easeInOutQuad(currentTime, start, change, duration);

        element.scrollTop = val;

        if (currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    }

    animateScroll();
}

[sqr_behr]

Дмитрий Носиков: у меня есть ещё один вопрос, возможно вы знаете решение. Касательно этой части:

Для того, чтобы не глючили тачи, отрубил их через event.preventDefault() и event.stopPropagation(). Написал свайп для оси X, а вот вернуть нормальный скролл на Y не получается.

Знаете ли вы о вариантах, где такая свистопляска не требуется или что-нибудь менее выносящее мозг, чем написание своего скролла в последствии?)