防止背景页面在Bootstrap中滚动

Question

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

当您单击图像时，以这种方式弹出一个放大图像。

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

Answer 1

您可以通过在触发打开图片事件时应用CSS来实现此目的 即 如图所示，只需将@Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if ((convertView == null) || (convertView.getTag() == null)) { LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = mInflater.inflate(R.layout.YOUR_LIST_ITEM, null); holder = new ViewHolder(); } else { holder = (ViewHolder) convertView.getTag(); } convertView.setTag(holder); /** * SET THE VALUES OF THE LISTVIEW'S ITEMS HERE */ return convertView; } 应用于您的Overflow:hidden

尝试一下

脚本

body

CSS

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

在Prevent BODY from scrolling上引用相同的问题，上面的解释更好

Answer 2

请在css中检查bootsrap4模态的位置。Bootsrap4在bootsrap4 modal documentation中清楚地解释了

此外，您可以参考以下简单示例以了解images modal popup的行为