3

Если полоса прокрутки дошла до конца или находится в начале (в любом направлении), она иногда там "застревает"... нужно активно пошевелить мышкой или ещё что-то, я если честно не разобрал... почему это происходит?

Код очень простой: курсор правее центра - происходит скрол вправо, выше центра - вверх и т.д

var X, Y;
var [xCounter, yCounter, xDirection, yDirection, dx, dy] = [0, 0, 0, 0, 0, 0];
var centerX, centerY, innerWidthHalf, innerHeightHalf;

init();

window.addEventListener('mousemove', mouseMoveHandler);

function mouseMoveHandler(e) {
  X = e.x;
  Y = e.y;

  dx = e.x - innerWidthHalf;
  dy = e.y - innerHeightHalf;

  if (X > innerWidthHalf) xDirection = -1;
  else if (X < innerWidthHalf) xDirection = 1;
  else xDirection = 0;

  if (Y > innerHeightHalf) yDirection = -1;
  else if (Y < innerHeightHalf) yDirection = 1;
  else yDirection = 0;
}

requestAnimationFrame(move);

function move() {
  var speedX = Math.abs(dx / 30);
  var speedY = Math.abs(dy / 15);

  xCounter = xCounter + xDirection * speedX;
  yCounter = yCounter + yDirection * speedY;

  window.scroll(X - xCounter, Y - yCounter);

  requestAnimationFrame(move);
}

function init() {
  centerX = innerWidth * 2;
  centerY = innerHeight * 2;

  innerWidthHalf = innerWidth / 2;
  innerHeightHalf = innerHeight / 2;
}

window.addEventListener('resize', () => init());
body {
  margin: 0;
  height: 400vh;
  width: 400vw;
  background-image: url(https://st2.depositphotos.com/1430176/7473/v/950/depositphotos_74731081-stock-illustration-medicine-doodle-seamless-background.jpg);
}

Я так понял, оно застревает, потому что функция move успевает навызываться кучу раз пока скролл находится вначале или в конце...

Вот значения того, находится ли скролл в конце или в начале:

function move() {
  .....
  var dE = document.documentElement;
  var dBBox = document.body.getBoundingClientRect();

  isXEnd = pageXOffset == dBBox.width - dE.clientWidth;
  isYEnd = pageYOffset == dBBox.height - dE.clientHeight;
  isXStart = pageXOffset == 0;
  isYStart = pageYOffset == 0;
  .....
  .....
}

Как с помощью них остановить функцию я могу сделать, но как потом заново всё возобновить я не понимаю )

1 ответ 1

3
+100

У вас проблема в том, что "нужная" позиция прокрутки сохраяется в переменной и много раз в секунду задается из переменной. И если проскролить страницу мышкой, оно тут же возвращает значение из переменной. Я это исправил, заменив scroll(toX, toY) на scrollBy(dx, dy)

var cursorX = 0,
  cursorY = 0;

var xDirection = 0,
  yDirection = 0;

var centerX, centerY;

function mouseMoveHandler(event) {
  cursorX = event.x;
  cursorY = event.y;

  if (cursorX > centerX) {
    xDirection = 1;
  } else if (cursorX < centerX) {
    xDirection = -1;
  } else {
    xDirection = 0;
  }

  if (cursorY > centerY) {
    yDirection = 1;
  } else if (cursorY < centerY) {
    yDirection = -1;
  } else {
    yDirection = 0;
  }
}
window.addEventListener('mousemove', mouseMoveHandler);

function move() {
  var speedX = Math.abs(centerX - cursorX) / 30;
  var speedY = Math.abs(centerY - cursorY) / 15;

  var scrollX = xDirection * speedX;
  var scrollY = yDirection * speedY;

  window.scrollBy(scrollX, scrollY);

  requestAnimationFrame(move);
}
requestAnimationFrame(move);

function init() {
  centerX = window.innerWidth / 2;
  centerY = window.innerHeight / 2;
}

window.addEventListener('resize', init);
init();
body {
  margin: 0;
  height: 400vh;
  width: 400vw;
  background-image: url(https://st2.depositphotos.com/1430176/7473/v/950/depositphotos_74731081-stock-illustration-medicine-doodle-seamless-background.jpg);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.