时间戳

首页 > 解决方案 > 在 jquery 中调整视口大小时禁用和启用滚动窗口

javascript - 在 jquery 中调整视口大小时禁用和启用滚动窗口

问题描述

我在这里有一个带有下拉菜单的导航栏，当我将整个屏幕拉伸到另一个分辨率时，我希望页面停止滚动。我已经查看了我的代码，我认为问题在于我的 if-else 语句中的条件。我现在被困了几个小时，我无法为我的问题制定解决方案。我还在我的 htmlaria-label="hidden"中添加了一个标签，用于启用和禁用整个页面滚动。有人可以告诉我我现在遇到的这个问题吗？

这是我的代码片段：

<div class="c-dropdown-btn"><i class="fas fa-bars c-grey-pill"></i></div>
    <div id="c-nav-mobile" aria-label="hidden">
      <ul class="c-nav-links2">
        <li><a href="#">カテゴリ1</a></li>
        <li><a href="#">カテゴリ2</a></li>
        <li><a href="#">カテゴリ3</a></li>
        <li><a href="#">カテゴリ4</a></li>
      </ul>
      <div class="c-img-cont2">
        <div class="c-image-res3"></div>
        <div class="c-consult-cont2">
          <div class="c-con-rel"><span class="c-consult-text2">自分のキャリアに合った留学を選ぶための無料相談会実施中&lt;/span>
            <button class="c-btn c-btn-primary consult-text">詳しくはこちら→</button>
          </div>
        </div>
      </div>
    </div>

这是我的jQuery代码：

$('.c-dropdown-btn i').click(function () {
    $(this).toggleClass('fa-times');
    $('#c-nav-mobile').fadeToggle("on");
    bodyStyle();
});
$(window).resize(function(){
    bodyStyle();
});
function bodyStyle() {
    var viewportWidth = $(window).width();
    var navMobile = $("#c-nav-mobile");

    if(viewportWidth < 768 && navMobile.attr("aria-label") == "hidden") {
        $("body").css("overflow", "hidden");
        console.log("abc");
    } else if (viewportWidth > 769 && navMobile.attr("aria-label") == "hidden"){
        $("body").css("overflow", "none");
        console.log("123");
    }
}

对于 scss 片段（对于#c-nav-mobile）

#c-{
&nav-mobile {
    display: none;
    position: absolute;
    left: 0;
    z-index: 1;
    top: 41px;
    width: 100%;
    height: 523px;
    padding: 25px 32px 34px 31px;
    background: rgba(0,0,0,0.5);
    @include mq('md') {
        display: none !important;
    }
    &.on {
        display: block;
    }
}

}

我声明了一个函数并在 resize 和我的点击事件中调用它。

标签： javascripthtmlcss

解决方案

#c-nav-mobile 添加这个：

box-sizing: border-box;

推荐阅读