Есть мобильное подменю. Это див с классом .submenu, который скроллится пальчиком вправо-влево. Задача: если активный пункт (класс .active) невидно целиком, то скроллить так, чтобы он был справа |

bitrix.menu template.php
<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?><? global $USER; if (!empty($arResult)) { $vis = true; foreach ($arResult as $k => $arItem) { if($arItem["SELECTED"]){ $vis = false; break; } }?> <div class="submenu <?=$vis?"":"hidemenu"?>"> <ul><? foreach ($arResult as $k => $arItem) {?> <li><a href="<?= $arItem["LINK"] ?>" <? if ($arItem["SELECTED"]) { ?>class="active" <? } ?>><?= $arItem["TEXT"] ?></a></li> <? } ?> </ul> </div> <? } ?> |
.submenu{ overflow-x: scroll; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; margin: 28px 0 25px; } .submenu.hidemenu{ opacity: 0; } .submenu::-webkit-scrollbar { display: none; } .submenu ul{ display: inline-block; margin: 0 10px; } @media (min-width: 500px) { .submenu ul{ margin: 0 35px; } } .submenu ul li{ display: inline; margin: 0 5px; } .submenu ul li a{ display: inline-block; padding: 5px 7px; background: #EDEDED; text-decoration: none; color: #000; } .submenu ul li a.active{ color:#fff; background: #2C77D2; } |
if($('.submenu .active').length>0){ //если элемент целиком невидно if(($(".submenu .active").offset().left + $(".submenu .active")[0].offsetWidth)>window.innerWidth) { $(".submenu").animate({ //по правому краю scrollLeft:$(".submenu .active").offset().left + $(".submenu .active")[0].offsetWidth-window.innerWidth+10 //по центру //scrollLeft: $(".submenu .active").offset().left - (window.innerWidth-$(".submenu .active")[0].offsetWidth)/2 }, 1); setTimeout(function(){ $(".submenu").css('opacity',1); },1); } else{ $(".submenu").css('opacity',1); } } |