Как отцентровать прокрутку при тройном клике по блоку?

Question

Нужно при тройном клике сделать скролл по центру между блоками внутри контейнера.

Высота col-1 и col-2 может быть разная

// Здесь я пытался что то делать, не выходит
$('.container').on('click', function(e){
  if(e.detail == 3){
    let height = $(this).innerHeight();
    let offset = $(this).children('.col-2').position().top;
    $(this).scrollTop(offset);
  }
});

* {
  box-sizing: border-box;
}
.container {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  overflow: auto;
}
.col-1, .col-2 {
  width: 100%;
}
.col-1 {
  height: 215px;
  border: 1px solid #f0f;
}
.col-2 {
  height: 112px;
  border: 1px solid #0ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="col-1"></div>
  <div class="col-2"></div>
</div>

Хочу добиться такого результата

Answer 1

Ваш let offset = $(this).children('.col-2').position().top; дает текущее положение блока от верхней границы страницы. Чтобы вычислить позицию относительно родительского контейнера - нужно оттуда еще и вычесть position().top родителя. Во-вторых, это значение можно менять через ручной скролл. Поэтому на него в принципе нельзя опираться.

Вместо этого, можно взять высоту первого дочернего элемента, и оттуда вычесть половину высоты родителя:

$('.container').on('click', function(e) {
  if (e.detail !== 3) return;
  // Если не тройной клик - прервать. Не будет дополнительного уровня вложенности.
  
  let $this = $(this);

  let container_hei = $this.innerHeight(); 
  let first_child_hei= $this.children().eq(0).outerHeight();

  $this.scrollTop( first_child_hei - container_hei / 2 );
});

* {
  box-sizing: border-box;
}

.container {
  margin: 20px;
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  overflow: auto;
}

.col-1,
.col-2 {
  width: 100%;
}

.col-1 {
  height: 215px;
  border: 1px solid #f0f;
}

.col-2 {
  height: 112px;
  border: 1px solid #0ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="col-1"></div>
  <div class="col-2"></div>
</div>

Такой подход подойдет конкретно для этого примера, а если у блоков могут быть огромные рамки или margin, можно дополнительно обрабатывать и их значения.

БЛОГ НА HUSL

Как отцентровать прокрутку при тройном клике по блоку?

Ответы (1 шт):