Как двигать курсором поле?

Question

[Artem0071]

Я совсем запутался различными параметрами

Есть контейнер, и в нем есть поле, которое нужно скроллить(не двигать)
Просто блоки у меня получается делать, но когда пытаюсь настроить скролл, то он либо не двигается, либо сразу улетает в небытие

Я так понял, что нужно запоминать предыдущее значение и отнимать/прибавлять следующее

Но там параметров немеренно и что откуда надо отнимать при условии движения скролла непонятно

Может есть какой то уже готовая какая нибудь функция? Или подскажите что откуда вычитать нужно

пример

Вот "слушаю" события, но не знаю что с ними делать

Comments

[Дмитрий Лузанов]

Без примера вообще непонятно о чем идет речь. Воспользуйтесь jsfiddle.net.

[Artem0071]

Predve4niy, забыл добавить, но исправился, спасибо

Answer 1

[0xD34F]

Так, что ли?

<div class="app">
  <div class="plain"></div>
</div>

.app {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

.plain {
  width: 1000px;
  height: 1000px;
  background: linear-gradient(135deg, red, blue);
}

let x = null;
let y = null;

document.querySelector('.app').addEventListener('mousemove', function(e) {
  if (e.buttons) {
    if (typeof x === 'number') {
      this.scrollLeft += (x - e.layerX) * 3;
      this.scrollTop += (y - e.layerY) * 3;
    }

    x = e.layerX;
    y = e.layerY;
  } else {
    x = y = null;
  }
});

https://jsfiddle.net/wxfy5h9t/

Comments

[Artem0071]

хмм, да
спасибо)

[Artem0071]

А почему там стоит коэфициент 3?

[Александр Вульф]

0xD34F чтооооо? Как ты догадался, что он имеет в виду?!

[0xD34F]

Artem0071, для наглядности, чтобы быстрее прокручивалось.