Почему scrollLeft не равен моему числу?

Question

[historydev]

Здравствуйте. Кручу-верчу, слайдер колочу. Заметил особенность, scrollLeft не хочет быть установленным числом, много чисел после запятой. Я попробовал Math.floor, прибавить остаток (вычесть число после запятой от единицы и добавить к моим 350) Результат не поддаётся логике.

Суть проблемы: при наведении на слайдер (там должны быть картинки) появится контроллер с кнопками влево и вправо, при нажатии на кнопку вправо будет выводится значение, я установил чтобы при каждом клике прибавлялось 350 (вправо). Получаю значение 349.897986587587, а нужно 350 ровно т.к. смещение скролла идёт криво из-за не точного значения.

Вот код: Тык
Буду рад любой помощи или подсказке. Спасибо.

Answer 1

[Danil929292929]

Я немного не понял в чем проблема, не могли бы разъяснить поподробней?

Comments

[historydev]

поправил вопрос, обновите

[Danil929292929]

Владимир, незнаю как у вас, я запустил ваш код, и все прибавляет отлично, выводит: 0, 350, 350, 700.
Если вы про нецелые числа, то scrollLeft - это не статичный параметр, округлить можно такими методами как: Math.floor, Math.round, Math.trunc (отбрасывает остаток), toFixed(0)

[historydev]

Danil929292929, я получаю следующее:

0
349.6000061035156
349.6000061035156
699.2000122070312
699.2000122070312
1048.800048828125
1048.800048828125
1398.4000244140625
1398.4000244140625
1748
1748
1749.5999755859375

[Danil929292929]

Владимир, Владимир, пришлите результат с округлением, и код,как вы округлили

[historydev]

Danil929292929, Вот

[Danil929292929]

Пришлите свои результаты

[historydev]

Danil929292929, шиндовс, хром:

349.6000061035156
698.4000244140625
1048
1397.5999755859375
1746.4000244140625
1749.5999755859375
1749.5999755859375

[Danil929292929]

С toFixed пришлите

[Danil929292929]

Владимир, с toFixed эти результаты равны: 349, 698, 1047 и т.д, вас устраивают эти результаты?

[historydev]

Danil929292929, на мобилке у меня тоже всё как у вас, всё работает

[historydev]

Danil929292929, нет, ничего не изменилось. Если юзать .toFixed при выводе в консоль, превращается в строку и получаю нужные значения, а если присваивать значение, оно возвращается к исходному.

[historydev]

Danil929292929, это всё не работает, Math.floor округляет до 349, мне нужно выровнять до моего, 350, не больше - не меньше, даже на 0.001, иначе слайды смещаются по мере переключения.

document.querySelector('.slider .slides').scrollLeft.toFixed(0);
document.querySelector('.slider .slides').scrollLeft = document.querySelector('.slider .slides').scrollLeft.toFixed(0);
document.querySelector('.slider .slides').scrollLeft = Math.floor(document.querySelector('.slider .slides').scrollLeft);

[Danil929292929]

Владимир, В чем проблема в начале кода, когда загрузилась страница, поставить параметр scrollLeft на 0?

window.onload() => document.querySelector('.slider .slides').scrollLeft = 0;

[historydev]

Danil929292929, в том, что я уже это пробовал, было бы всё так банально, я бы сюда не стучался

[Danil929292929]

Владимир, попробуй:

const elements = 5; // кол-во слайдов
const otstup = 350;
let array = [];
let slide = 1;

for (var i = 0; i < elements; i++) {
  array.push(otstup * i);
};

console.log(array) // 1 слайд - 0, 2 слайд - 350, 3 слайд = 700, 4 слайд = 1050, 5 слайд - 1400.

document.querySelector('.slider .controls .right').onclick = () => {
    if (!array[slide + 1]) return document.querySelector('.slider .slides').scrollLeft = 0;
    document.querySelector('.slider .slides').scrollLeft = array[slide];
    slide++;
    //document.querySelector('.slider .slides').scrollLeft += 350;
    console.log(document.querySelector('.slider .slides').scrollLeft)
}
document.querySelector('.slider .controls .left').onclick = () =>
    document.querySelector('.slider .slides').scrollLeft -= 350;

[Danil929292929]

Владимир, Держи полностью готовый вариант, я немного заигрался)

const elements = document.getElementsByClassName("slides")[0].childElementCount; // кол-во слайдов
const otstup = 350;
let array = [];
let slide = 1;

for (var i = 0; i < elements; i++) {
  array.push(otstup * i);
};

console.log(array) // 1 слайд - 0, 2 слайд - 350, 3 слайд = 700, 4 слайд = 1050, 5 слайд - 1400.

document.querySelector('.slider .controls .right').onclick = () => {
    if (!array[slide]) {
      document.querySelector('.slider .slides').scrollLeft = 0;
      slide = 1;
      return;
    }
    document.querySelector('.slider .slides').scrollLeft = array[slide];
    slide++;
}
document.querySelector('.slider .controls .left').onclick = () => {
  if (!array[slide]) {
    document.querySelector('.slider .slides').scrollLeft = array[array.length - 1];
    slide = document.getElementsByClassName("slides")[0].childElementCount;
    return;
  }
  document.querySelector('.slider .slides').scrollLeft -= array[slide];
  slide--;
}

[historydev]

Danil929292929, как временный костыль пойдёт, спасибо, упаковал хорошенько, вот, держи:

const elements = document.querySelectorAll('.slider .slides .slide').length; // кол-во слайдов
const step = 350;
let slides = [];
let slide = 0;

for(let i = 0; i < elements; i++) {
    slides[i] = step * i;
}

document.querySelector('.slider .controls .right').onclick = () => {
    slide++;
    if(slide >= slides.length) slide = 0;
    document.querySelector('.slider .slides').scrollLeft = slides[slide];
    console.log(slide);
}

document.querySelector('.slider .controls .left').onclick = () => {
    slide--;
    if(slide < 0) slide = slides.length-1;
    document.querySelector('.slider .slides').scrollLeft = slides[slide];
    console.log(slide);
}

[historydev]

Danil929292929, погрешность кстати осталась, но она не возрастает, а статична, каждый второй элемент работает как в моём первом варианте

[historydev]

Danil929292929, точнее наоборот, каждый второй элемент нормальный, а первые по старому:

349.6000061035156
700
1049.5999755859375
1400

[historydev]

Danil929292929, ахахахахах, я раскрыл дело, поставь значение в шаге 300 и всё заработает) Я правда не понимаю, почему оно такое кривое)

[historydev]

Danil929292929, проблема именно в значениях 350 - 359, аналогично 450 - 459 и т.д, оооочень клоунски работает)

[Danil929292929]

Владимир, я незнаю откуда могла взяться погрешность, так как мы не прибавляем, а присваиваем параметру определенное значение

[historydev]

Danil929292929, я тоже не понимаю, но ладно, нашли причину, остальное не наше дело)

Answer 2

[frolandr]

Аналогичная проблема:

div.scrollTop = 0;
let but = document.querySelector("button");
but.addEventListener("click", function() {
    div.scrollTop += 10;
    console.log(div.scrollLeft);
    console.log(div.scrollTop);
})

Получаю в консоли:
0
9.600000381469727
0
19.200000762939453
0
28.799999237060547