Помоги отвязать функцию от jquery.

[Artur_Hopf]

Добрый день. Есть функция прокрутки на jquery:

function scroll_page(){
var scr = $(".scroll-js");
scr.mousedown('click', function (event) {
var startX = this.scrollLeft + event.pageX;
var startY = this.scrollTop + event.pageY;
scr.mousemove('click', function (event) {
this.scrollLeft = startX - event.pageX;
this.scrollTop = startY - event.pageY;
return false;
});
});
$(window).mouseup(function() {
scr.off("mousemove");
});
}


Переписал так, пока для getElementById:


function scroll_page(){
var scr = document.getElementById('scroll');
scr.addEventListener("mousedown", function(e){
var startX = this.scrollLeft + e.pageX;
var startY = this.scrollTop + e.pageY;
scr.addEventListener("mousemove", function(e){
this.scrollLeft = startX - e.pageX;
this.scrollTop = startY - e.pageY;
return false;
});
});
window.addEventListener("mouseup", function(){
scr.removeEventListener("mousemove");
});
}


В конце при отпускании мышки ошибка, говорит для этой строки нужен второй аргумент.

scr.removeEventListener("mousemove");

Вроде как нужна функция, но я не могу сообразить как написать :-?
Помогите пожалуйста, с учетом того что потом буду делать это для getElementsByClassName

[Nexus]

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

Как удалить обработчик смотрите тут:
https://learn.javascript.ru/introduction-browser-events#addeventlistener-i-removeeventlistener

[Artur_Hopf]

Nexus,

Написал так, ошибка пропала но отжатие мышки не прекращает mousemove:

function scroll_page(){
var scr = document.getElementById('scroll');
var startX, startY;

var listener = function(e) {
startX = this.scrollLeft + e.pageX;
startY = this.scrollTop + e.pageY;
scr.addEventListener('mousemove', endListener);
};

var endListener = function(e) {
this.scrollLeft = startX - e.pageX;
this.scrollTop = startY - e.pageY;
return false;
};

scr.addEventListener('mousedown', listener);

window.addEventListener("mouseup", function(){
scr.removeEventListener('mousedown', endListener);
});
}

Что не так сделал?(

[Artur_Hopf]

Сейчас "не работает" так:

<div id="scroll" style="height: 100px; width: 200px; background-color: #444; color:white;overflow: hidden;">123<br>sadsa<br>123<br>111<br>123<br>4tr<br>fdfs<br>123<br>ere<br>eerr<br>123<br>123<br>dfdf<br>dfdd<br>dfdf<br></div>
<script>
window.onload = function() {
scroll();
}
function scroll(){

var scr = document.getElementById('scroll');
var startX, startY;

var listener = function(e) {
startX = this.scrollLeft + e.pageX;
startY = this.scrollTop + e.pageY;
scr.addEventListener('mousemove', endListener);
};

var endListener = function(e) {
this.scrollLeft = startX - e.pageX;
this.scrollTop = startY - e.pageY;
return false;
};

scr.addEventListener('mousedown', listener);

window.addEventListener("mouseup", function(){
scr.removeEventListener('mousedown', endListener);
});
}
</script>

[Artur_Hopf]

Нашел ошибку, заработало =)

<div id="scroll" style="height: 100px; width: 200px; background-color: #444; color:white;overflow: hidden;">123<br>sadsa<br>123<br>111<br>123<br>4tr<br>fdfs<br>123<br>ere<br>eerr<br>123<br>123<br>dfdf<br>dfdd<br>dfdf<br></div>
<script>
window.onload = function() {
scroll();
}
function scroll(){

var scr = document.getElementById('scroll');
var startX, startY;

var listener = function(e) {
startX = this.scrollLeft + e.pageX;
startY = this.scrollTop + e.pageY;
scr.addEventListener('mousemove', endListener);
};

var endListener = function(e) {
this.scrollLeft = startX - e.pageX;
this.scrollTop = startY - e.pageY;
return false;
};

scr.addEventListener('mousedown', listener);

window.addEventListener("mouseup", function(){
scr.removeEventListener('mousemove', endListener);
});
}
</script>