时间戳

首页 > 解决方案 > 防止背景页面在 Bootstrap 中滚动

jquery - 防止背景页面在 Bootstrap 中滚动

问题描述

我在我的网站上使用 Bootstrap 4。该网页包含由文本和图像组成的文章。

页面预览

当您单击图像时，会以这样的模式弹出放大图像。

在此处输入图像描述

但问题在于模式打开页面滚动到页面顶部。有什么方法可以防止在模式打开时自动滚动我的页面。

标签： jquerytwitter-bootstrap

解决方案

您可以通过在触发打开图像的事件时应用 CSS 来做到这一点，即只需应用Overflow:hidden到您的图像body，如下所示

尝试这个

脚本

$("#YourModalID").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

CSS

body.modal-open {
    overflow: hidden;
}

请参阅有关防止身体滚动的相同问题，上面更好地解释了

推荐阅读