Горизонтальная автопрокрутка в мобильном телефоне, чтобы показать вырезанную часть - PullRequest
Новая
       24

Горизонтальная автопрокрутка в мобильном телефоне, чтобы показать вырезанную часть

0 голосов
/ 01 октября 2018

Требование: у меня плохая навигация в мобильном телефоне. Я хочу реализовать горизонтальную автопрокрутку к ней. Поэтому, когда пользователь нажимает на ссылку, которая частично видна в навигационной панели, он должен автоматически прокручиваться, чтобы полностью открыть ссылку Навигация (до) Навигация (после)

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

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

HTML-разметка: 

<div class="community-nav">
                <div class="container">                 
                        <div class="community-logo"><img src=""></div>
                        <div class="community-nav-wrapper">
                            <div id="menu-center">
                                <ul class="community-links" id="myNavbar">
                                    <li><div data-target="#community_overview">Overview</div></li>
                                    <li><div data-target="#community_floorplan_pricing">Floor Plans &amp; Pricing</div></li>
                                    <li><div data-target="#communitydetail_gallery">Gallery</div></li>
                                    <li><div data-target="#community_nearby">Places Near by</div></li>
                                    <li><div data-target="#community_events">Events</div></li>
                                    <li><div data-target="#community_benefits">Resident Benefits</div></li>
                                </ul>
                            </div>
                            <div class="community-contact-btn"><a href="#">Contact us</a></div>
                        </div>
                    </div>
                </div>




 <div class="community-livin nav-section" id="community_overview">
    </div>
    <div class="community-amenities nav-section"></div>
    <div class="community-details-section nav-section" id="community_floorplan_pricing"></div>
<div class="community-map nav-section" id="community_nearby"></div>

JS для добавления активных ссылок и прокрутки к разделу: 

 var lastId;
    var topMenu = $(".community-nav");   
    var topMenuHeight = topMenu.outerHeight() - 19;
    if(window.matchMedia("(max-width: 768px)").matches){
        var logoHeight = $(".community-logo").outerHeight();
        var topMenuHeight =  topMenu.outerHeight() - logoHeight;
    };
    menuItems = topMenu.find('.community-links li > div'),
    scrollItems = $('.nav-section')


      menuItems.click(function(e){
        var href = $(this).attr("data-target");
        var offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight + 20;
         if(window.matchMedia("(max-width: 768px)").matches){


          };
        $('html, body').stop().animate({ 
            scrollTop: offsetTop
        }, 850);
        e.preventDefault();
      });

      function getCurrentSection(scrollPosition) {
        return scrollItems.toArray().findIndex(function(item) {
          return item.offsetTop < scrollPosition && item.offsetTop+item.clientHeight > scrollPosition;
        });
      }

    // Bind to scroll
    $(window).on("load scroll",function(e){    
        var scrollPosition = $(this).scrollTop()+topMenuHeight;
        var currentSection = getCurrentSection(scrollPosition) ;
        var id = currentSection > -1 ? scrollItems[currentSection].id : "";

        if (id && lastId !== id) {
            lastId = id;
        menuItems.removeClass("active");
        menuItems.filter("[data-target='#"+id+"']").addClass('active');
        }                   
     });

Пожалуйста, помогите мне достичь этого сценария.

Это самый близкий пример, который я нашел к тому, что именно хочу реализовать http://www.dynamicdrive.com/dynamicindex1/priorityscrollmenu.htm Это при наведении, я хочу что-то похожее, но по щелчку и которое также автоматически прокручивается, когда пользователь прокручивает страницу.

...