单击确定后如何停止sweetalert滚动到顶部？答案

【问题标题】：How can i stop sweetalert scrolling to top after clicking ok?单击确定后如何停止sweetalert滚动到顶部？
【发布时间】：2017-09-09 20:59:42
【问题描述】：

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

根据我一直在阅读的内容，我需要某种 preventdefault 或其他东西，但我无法弄清楚它会去哪里？

这是我的脚本：

<!-- 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>

【问题讨论】：

此问题已修复，请将您的 SweetAlert2 依赖项升级到最新版本。

标签： javascript jquery html sweetalert2

【解决方案1】：

我通过简单地在fire(): heightAuto: false 中添加一行成功地防止了这种情况

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

【讨论】：

谢谢！把我从这种恼人的挫折中解救出来。 :)

【解决方案2】：

试试这个

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

【讨论】：

似乎仍然没有做任何事情。在 sweetalert2 上按 OK 后，它会滚动回页面顶部。
试试这个 body.swal2-height-auto { overflow-y: visible !important;高度：100% ！重要； }

【解决方案3】：

基于版本 7.* 你可以使用这种风格：

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

将背景设置为false 使它看起来有效，但也删除了背景。

【解决方案6】：

对于那些仍然有同样问题的人，您可以将以下内容添加到您的 Sweet Alert 选项中：“heightAuto: false”，问题就解决了。

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

我通过使用让它工作，我在移动设备上遇到了问题，它把身体固定在位置上，它使 html 的高度为 0。

body.swal2-shown, body.swal2-shown.swal2-iosfix {
position: initial !important;

}

【讨论】：