Центрирование блока внутри блока с прокруткой

[peretc001]

Добрый день.

Пытаюсь сделать аналог вкладок как в Excel
Рабочий пример https://jsfiddle.net/peretc001/chpv0gre/

Внизу страницы имеются закладки внутри блока с overflow:hidden
При нажатии на вкладку (например 15) с помощью ajax происходит перезагрузка страницы и через php подгружается инфа из базы в центр страницы (там где Название компании Адрес Телефон).
При этом вкладка (например 15) остается на месте и становится активной

Но Если перейти по ссылке на карточку Компании и потом вернуться обратно то активная вкладка (например 15) уедет за область видимости, и видны будут только с 1 по 10.

Можно ли как-то сделать, чтоб при возврате активная вкладка (как вы уже догадались, номер 15), была в зоне видимости

Всем кто понял что я хочу, спасибо

 

[AnrDaemon]

Выставляй фрагмент при переключении вкладки.

 

[peretc001]

Выставляй фрагмент при переключении вкладки.

не понял что это значит.

Я думал может есть скрипт, который горизонтально сдвигает экран внутри блока overflow
или что-то по типу ссылки <a href="#id-15">15</a>
только переход происходит не по вертикали а по горизонтали

 

[AnrDaemon]

https://tools.ietf.org/html/rfc7320#section-2.5

 

[peretc001]

https://tools.ietf.org/html/rfc7320#section-2.5

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

удалось определить на сколько % по оси х прокручен блок oveflow (https://jsfiddle.net/peretc001/chpv0gre/ обновлен)

$('.region_list ul').scroll(function(){
    var scrollPercentage=100*this.scrollLeft/this.scrollWidth/(1-this.clientWidth/this.scrollWidth);
    $('#log').html(scrollPercentage.toFixed(0));
});

подскажите как мне теперь запихнуть это в ссылку <a href="/user.php?id=<?php echo $row['id']; ?>" + js code> или в сессию

 

[fixxxer]

Да нафига ему фрагмент, он же страницу релоадит, и там в css уже предусмотрен class="active", который будет проставлен на ссылку активного таба сервером

Что-то типа того (не проверял)

document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('.region_list ul');
  const activeLink = container.querySelector('.active');
  if (activeLink) {
    container.scrollLeft = Math.max(0, activeLink.offsetLeft - (container.offsetWidth - activeLink.offsetWidth) / 2);
  }
});

 

[peretc001]

Круто! Спасибо, то что надо.

 

[peretc001]

А можно еще вопрос:
Есть таблица

id, city, kray

данные такие
1, Абинск, Краснодарский
2, Геленджик, Краснодарский
3, Новороссийск, Краснодарский
4, Сочи, Краснодарский
5, Майкоп, Адыегя
6, Адыгейск, Адыгея
и т.д.

Подскажите как написать запрос чтоб получить:

Адыгея: Адегейск, Майкоп, Краснодарский: Абинск, Геленджик, Новороссийск, Сочи и т.д

я делаю

$region_list = $db->getAll('SELECT * FROM `region` GROUP BY kray');
foreach ($region_list as $row) {   ?>
<li><?php echo $row['kray'];?>:</li>
<li><?php echo $row['city'];?>,</li>
<?php } ?>

и получаю:
Адыгея: Адегейск, Краснодарский: Абинск

 

[fixxxer]

Это вообще некорректный запрос. При group by обязательно должны быть агрегирующие функции в SELECT. Mysql при настройках по умолчанию многое прощает и работает по принципу "garbage in - garbage out", при более строгих настройках будет выдана ошибка.

Для получения желаемого нужен GROUP_CONCAT.

 

[peretc001]

Это вообще некорректный запрос. При group by обязательно должны быть агрегирующие функции в SELECT. Mysql при настройках по умолчанию многое прощает и работает по принципу "garbage in - garbage out", при более строгих настройках будет выдана ошибка.

Для получения желаемого нужен GROUP_CONCAT.

спасибо

$region_list = $db->getAll('SELECT kray, GROUP_CONCAT(`city`) as `city_group` FROM `region` GROUP BY kray'); 
foreach ($region_list as $row) { ?>
<li><b><?php echo $row['kray'];?>:</b></li>
<?php 
#разбиваем группу
$divide = explode(',', $row['city_group']); 
foreach($divide as $list) { ?>
<li><a <?php if($city == $list) { echo 'class="active"'; } ?> href="/home.php?city=<?php echo $list;?>"><?php echo $list;?></a></li>
<?php } ?>