jQuery隐藏溢出时停止内容跳转

kwvwclae 于 2022-12-18 发布在 jQuery

关注(0)|答案(1)|浏览(143)

滚动条的默认大小是17px宽，但是最好让浏览器计算精确的宽度，然后使用它。

// Calculating the exact width of the browser scrollbar
    let scrollbarWidth=(window.innerWidth-$(window).width());
    
// then when needed to perform a click action just add this below it:
        $("body").css("overflow","hidden");
        $("body").css("padding-right", scrollbarWidth +"px");

jquery

来源：https://stackoverflow.com/questions/74783995/jquery-stop-content-from-jumping-when-overflow-hidden

1条答案

按热度按时间

bhmjp9jg1#

试着在你的身体里使用box-sizing: border-box;。
在这个演示中，我将主体宽度设置为***（100vw + 1px）***，这样它就可以使用水平滚动条。当你点击这个按钮时，它会添加你所显示的样式（隐藏滚动条并在主体上添加边距）。
我为按钮添加了边框，以显示它按预期正确地对齐到右边缘。

$(document).ready(function() {
    console.log($(document).width() , window.innerWidth);
    var scrollbarWidth = ($(document).width() - window.innerWidth) + "px";   

    $(document).on('click', '.is-open', function() {
      console.log(scrollbarWidth);
      if ($(this).hasClass("is-open")) {
        $("body").css("overflow", "hidden");
        $("body").css("padding-right", scrollbarWidth);
      }
    });
});

body{  
  width: calc(100vw + 2px);
  box-shadow: inset 0 0 2px red;
  margin: 0;
  box-sizing: border-box;  
}

.is-open{
  cursor: pointer;  
  border: solid green;
  padding: 2px 10px;
  font-size: 2rem;
  text-align: right;
}

.buttoncontainer{
  display: block;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Clicking the button will hide the scrollbar and add a padding-right to body</p>
  <div class="buttoncontainer">  
    <button class="is-open">Click here</button>
  </div>
</body>

赞(0）回复(0）举报 2022-12-18

我来回答

jQuery隐藏溢出时停止内容跳转

1条答案

相关问题

热门标签

最新问答