Question

当用户在我的网站上发布评论时，我使用sweetalert2脚本向下滚动到他们的评论并弹出甜蜜警报但是当他们在甜蜜警报框上点击“确定”时它会向后滚动到了顶部。

从我正在阅读的内容中，我需要某种预防措施或某些东西，但我无法弄清楚它会在哪里发生？

这是我的剧本：

<!-- Sweet alert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.js"></script>
<script>
window.location.hash = "comment-<?php echo $newcommentid; ?>";
 $(document).ready(function () {
    swal({
                title: "Comment Posted",
                text: "Thanks, your comment has now been successfully posted.",
                type: "success"
            });
 });     

</script>

Answer 1

基于版本7 *，您可以使用以下样式：

html.swal2-shown,body.swal2-shown { overflow-y: hidden !important; height: auto!important;}

Answer 2

试试这个

$('#comment').click(function(event){
   //....swal stuff
   event.preventDefault();
});

Answer 3

对于那些在身体上添加隐藏溢出物的人来说，这是一个常见的问题。

来源：https://github.com/sweetalert2/sweetalert2/issues/781

解决方案很简单......将其添加到CSS：

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { overflow-y: visible !important; }

Answer 4

通过在fire(): heightAuto: false

中添加一行，我成功地避免了这一情况

Swal.fire({
  heightAuto: false,
  text: "I\'m sure this would run on SWAL2@7*"
)};

Answer 5

使用backdrop选项，如下所示将其设置为false。

swal({
   backdrop:false,
   title: "Comment Posted",
   text: "Thanks, your comment has now been successfully posted.",
   type: "success"
});

Answer 6

对于那些仍然存在相同问题的用户，可以在“ Sweet Alert”选项中添加以下内容：“ heightAuto：false ”，问题就可以解决。

Swal.fire({
heightAuto: false,
title: 'Hello,
Text: 'This is an alert'
});

Answer 7

有时您可能需要更多。我试图使用以前的答案，但它在 Electron 上对我不起作用。我通过使用 heightAuto 和背景解决了这个问题。使用 rgba 值似乎可以很好地模拟默认背景。手动设置背景是唯一为我修复它的方法。

swal({
   title: "Title here",
   text: "Text here",
   icon: "success",
   heightAuto: false,
   backdrop: "rgba(0,0,0,0.4)"
});

点击确定后如何停止sweetalert滚动到顶部？

7 个答案: