0

Есть блок с горизонтально расположенными элементами. Блок длинный. Используется горизонтальный скролл. Как сделать, чтобы при нажатии на новый элемент, происходил скроллинг к нему? Есть набросок на jsfiddle, но так сроллинг происходит как-то коряво. Иногда бывает недоскролливает, если кликать на дальние элементы. Вот код:

HTML:

<div class="container">
  <div class="testBox">
    <div class="inner">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item act"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>
<div class="diag">Расстояние до элемента: <span>0</span>px</div>

CSS

.diag {
  padding: 5px 10px;
}
.container {
  width: 600px;
  margin: 0 auto;
}
.testBox {
  display: block;
  position: relative;
  height: 100px;
}
.testBox .inner {
  overflow: auto;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
.testBox .inner .item {
  display: inline-block;
  margin-right: 5px;
  padding: 30px;
  background-color: #f8b068;
  border-radius: 5px;
  cursor: pointer;
}
.testBox .inner .act {
  background-color: #6ce890;
}
.testBox .inner .item:last-child {
  margin-right: 0;
}

JS (jQuery)

$('.testBox .inner .item').click(function() {
        $('.testBox .inner .item').removeClass('act');
    $(this).addClass('act');
    let elemBase = $('.testBox .inner').offset().left,
        elemActive = $('.testBox .inner .act').offset().left;
    elemActive = elemActive - elemBase;
    $('.testBox .inner').animate({
        scrollLeft: elemActive
    }, 100);
    $('.diag span').text(elemActive);
});

2 ответа 2

1

Мне стало это интересно и я решил с нуля написать решение вашего вопроса, он проще и эффективнее - JSFiddle

var containerOuterWidth = $('.container').outerWidth(); // узнаем ширину контейнера (width + padding)

// обработчик клика по элементу
$(".item").click(function() {
  var itemOuterWidth = $(this).outerWidth(); // узнаем ширину текущего элемента (width + padding)
  var itemOffsetLeft = $(this).offset().left; // узнаем значение отступа слева в контейнере у текущего элемента
  var containerScrollLeft = $(".container").scrollLeft(); // узнаем текущее значение скролла

  var positionCetner = (containerOuterWidth / 2 - itemOuterWidth / 2); // рассчитываем позицию центра

  var scrollLeftUpd = containerScrollLeft + itemOffsetLeft - positionCetner; // рассчитываем положение скролла относительно разницы отступа элемента и центра контейнера

  // анимируем
  $('.container').animate({
    scrollLeft: scrollLeftUpd
  }, 400);
});

Элемент перемещается ровно в центр! Вы можете использовать разную ширину вашего контейнера и ваших элементов и это будет работать корректно. Также вы можете изменять свойства margin и padding, это не скажется на результате.

Обратите внимание, я использовал jQuery и CSS библиотеку Normalize.

1
  • Да, классно получилось! Сейчас посмотрю, как Вы это сделали. Спасибо!
    – LeXxyIT
    12 авг 2019 в 12:38
1

Разделите Ваши item на блоки, и id блока добавьте в качестве data атрибута, тем самым образуя что-то типо пейджинга. Зная ширину item + margin можно умножить на indexэлемента, тем самым узнаете на каком расстоянии в пикселях расположен элемент от левого края. Если item формируются перебором for, то просто подставляйте index в data-id. Решение ниже с Вашим кодом:

$('.testBox .inner .item').click(function(e) {
		$('.testBox .inner .item').removeClass('act');
    $(this).addClass('act');
    let elemBase = $('.testBox .inner').offset().left,
        elemActive = $('.testBox .inner .act').offset().left;
        elemActive = (e.target.offsetWidth + 5) * parseInt(e.target.dataset.id); // 5 это margin-right
    $('.testBox .inner').animate({
        scrollLeft: elemActive
    }, 100);
    $('.diag span').text(elemActive);
});
.diag {
  padding: 5px 10px;
}
.container {
  width: 600px;
  margin: 0 auto;
}
.testBox {
  display: block;
  position: relative;
  height: 100px;
}
.testBox .inner {
  overflow: auto;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
.testBox .inner .item {
  display: inline-block;
  margin-right: 5px;
  padding: 30px;
  background-color: #f8b068;
  border-radius: 5px;
  cursor: pointer;
}
.testBox .inner .act {
  background-color: #6ce890;
}
.testBox .inner .item:last-child {
  margin-right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="testBox">
    <div class="inner">
      <div class="item" data-id="0"></div>
      <div class="item" data-id="1"></div>
      <div class="item act" data-id="2"></div>
      <div class="item" data-id="3"></div>
      <div class="item" data-id="4"></div>
      <div class="item" data-id="5"></div>
      <div class="item" data-id="6"></div>
      <div class="item" data-id="7"></div>
      <div class="item" data-id="8"></div>
      <div class="item" data-id="9"></div>
      <div class="item" data-id="10"></div>
      <div class="item" data-id="11"></div>
      <div class="item" data-id="12"></div>
      <div class="item" data-id="13"></div>
      <div class="item" data-id="14"></div>
      <div class="item" data-id="15"></div>
      <div class="item" data-id="16"></div>
      <div class="item" data-id="17"></div>
      <div class="item" data-id="18"></div>
      <div class="item" data-id="19"></div>
      <div class="item" data-id="20"></div>
      <div class="item" data-id="21"></div>
      <div class="item" data-id="22"></div>
      <div class="item" data-id="23"></div>
      <div class="item" data-id="24"></div>
    </div>
  </div>
</div>
<div class="diag">Расстояние до элемента: <span>0</span>px</div>

2
  • Да... Точно... Спасибо!
    – LeXxyIT
    12 авг 2019 в 10:52
  • @LexXy пожалуйста! 12 авг 2019 в 10:53

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.