Question

我正在使用phonegap构建应用程序，但我遇到了一个错误，如果我滚动到导航栏的底部，我的身体换行开始滚动。

这是一个例子：

<body>
    <nav id="navbar-header">
         <div class="navbar-header"></div> //navbar in top of the page, not relevant probarly
         <div class="header-inner">
               <div id="navbar">
                     <ul>
                           <li>list with pages, on some devices scrollable, on some not.</li>
                           <li>some of it is dynamically loaded.</li>
                     </ul>
                     <div>lot of elements that make it scrollable</div
               </div>
         </div>
     </nav>
     <div id='wrap'>
          <div class="overlay">is display:block if the navbar is shown, else it is display:none</div>
          <div id='pageContext'>lot of dynamic in here, so scrollable most of the times</div>
    </div>
</body>

的CSS：

#navbar-header {
height: 70px;
}

#navbar {
position: relative;
width: 225px!important;
height: auto;
min-height: 100vh;
float: right;
padding: 0;
margin-right: -225px; //width is static, this is set to 0 with animation if the navbar slides in.
margin-top: 10px;
overflow-y: scroll;
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.25;
z-index: 10;
background-color: black;
background-size: contain;
display: none;
}

和我目前使用的javascript： //注释掉的代码是其他不正常工作的解决方案，但我将它们保存在这个代码段中。

$(function(){
    var menuBtnBusy = false;
    $('#menubtn').click(function(){ 
        if( !menuBtnBusy ) {
            menuBtnBusy = true;
            var $this = $(this);

            if( $this.attr('aria-expanded') === "false" ) {
                $('#navbar').animate({'margin-right':'0px'}, 600, function() {
                    $this.attr('aria-expanded', "true");
                    menuBtnBusy = false;
                    // $('body').css('overflow','hidden');
                });
                $('.overlay').css('display','block');
                $('.overlay').css('opacity',0.25);
                // var totalHeight=$(window).height()-70;//$('#navbar-header').height();
                // previousYoffset=window.scrollY;
                // $('#homepage-wrapper').css('max-height',totalHeight+'px');
                // $('#homepage-wrapper').css('overflow','hidden');
            }
            else {
                $('.overlay').css('display','none');
                $('.overlay').css('opacity',0);
                $('#navbar').animate({"margin-right":"-225px"}, 600, function() {
                    $this.attr('aria-expanded', "false");
                    menuBtnBusy = false;
                    // $('body').css('overflow','visible');

                    $('#navbar ul').show();
                    $('#navbar .region-wrap').hide();
                });
                // $('#homepage-wrapper').css('max-height','none');
                // $('#homepage-wrapper').css('overflow','visible');
                // window.scroll(0,previousYoffset);
                // previousYoffset=0;
            }
        }
    });     
    $('.overlay').on("click", function(e) {
        if (!menuBtnBusy) {
            menuBtnBusy = true;
            if ( $('#menubtn').attr('aria-expanded') === "true" ) {
                if (e.target.id != '#navbar' && $(e.target).parent('#navbar').length == 0) {
                    $('.overlay').css('display','none');
                    $('.overlay').css('opacity',0);
                    $('#navbar').animate({"margin-right":"-225px"},600,function() {
                        $('#menubtn').attr('aria-expanded', "false");
                        menuBtnBusy = false;
                        // $('body').css('overflow','visible'); 
                        $('#navbar ul').show();
                        $('#navbar .region-wrap').hide();


                    });     
                    // $('#homepage-wrapper').css('max-height','none');
                    // $('#homepage-wrapper').css('overflow','visible');    
                    // window.scroll(0,previousYoffset);
                    // previousYoffset=0;                   
                }
            }
        }
    }); 
});

有人知道在导航栏打开时我是如何阻止身体滚动的吗？

我已经尝试了很多东西，例如暂时将换行高度设置为100％并溢出隐藏，但是每次打开导航栏时该解决方案都会使页面跳到顶部。

所以我打开导航栏时根本不想让身体跳跃。

我想到的一个想法是，滚动时，如果最近的元素是导航栏或后面的身体，但我完全没有线索，如果这是可能的，也许有更聪明的想法。

image of my issue

当我在导航栏手机中滚动时，如何防止另一个div滚动

0 个答案: