使用Bootstrap 4的Toast组件显示动态创建的Toast时，如何防止页面滚动？

Question

我正在基于onClick事件使用JavaScript动态创建Toast元素。 该部分工作正常，但问题是每次我显示新吐司时页面都滚动到顶部。 我正在使用Bootstrap 4的toast组件。

这是展示吐司的容器：

<div id="toastDrawer" aria-live="polite" aria-atomic="true" style="position: absolute; top: 0; right: 0; z-index: 999999;"></div>

（我也尝试过使用position: fixed;样式position: fixed;同样，我遇到了同样的问题。

我使用的吐司看起来像这样：

<div class="toast ml-auto" id="${toastID}" role="alert" data-delay="1400" data-autohide="true">
    <div class="toast-header">
        <strong class="mr-auto">Success</strong>
        <small class="text-muted">${formattedTime}</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="toast-body">
        Complete
    </div>
</div>

然后显示面包，然后使用以下JavaScript代码将其从DOM中删除：

const toast = $.parseHTML(html);
$('#toastDrawer').append(toast);
const $toast = $(`#${toastID}`);
$toast.on('hidden.bs.toast', function () {
    $toast.remove();
});
$toast.toast('show');

我还应该注意，我确实在窗口加载时初始化了Toast函数，如下所示：

$().toast();

完整的代码如下所示：

 (function() { 'use strict'; window.addEventListener('load', function() { const showToast = function(event) { const toastID = generateID(); const html = `\\t<div class="toast ml-auto" id="${toastID}" role="alert" data-delay="1400" data-autohide="true"> \\t\\t<div class="toast-header"> \\t\\t\\t<strong class="mr-auto">Success</strong> \\t\\t\\t<small class="text-muted">time</small> \\t\\t\\t<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> \\t\\t\\t\\t<span aria-hidden="true">×</span> \\t\\t\\t</button> \\t\\t</div> \\t\\t<div class="toast-body"> \\t\\t\\tComplete \\t\\t</div> \\t</div>`; const toast = $.parseHTML(html); $('#toastDrawer').append(toast); const $toast = $(`#${toastID}`); $toast.on('hidden.bs.toast', function() { $toast.remove(); }); $toast.toast('show'); } $(`#testBtn`).on("click", showToast); const generateID = function() { const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; const randomID = Array(8).join().split(',').map(function() { return possible.charAt(Math.floor(Math.random() * possible.length)); }).join(''); // Add timestamp to the random value to ensure consistently unique // values over time return String(randomID + Date.now()); }; }); })();

 <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div id="toastDrawer" aria-live="polite" aria-atomic="true" style="position: absolute; top: 0; right: 0; z-index: 999999;"></div> <div class="container"> <div class="row"> <div class="col"> <h1>Toast button on bottom of page</h1> <h2>Filler content to make page long</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci dapibus ultrices in iaculis nunc. Mattis rhoncus urna neque viverra justo nec. Mauris vitae ultricies leo integer malesuada. Nisi vitae suscipit tellus mauris a diam maecenas sed. Montes nascetur ridiculus mus mauris vitae ultricies. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Sed risus ultricies tristique nulla aliquet enim. Nisl purus in mollis nunc sed id. Felis eget velit aliquet sagittis id consectetur purus. Egestas maecenas pharetra convallis posuere morbi leo urna. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Arcu non odio euismod lacinia at quis risus. Elementum pulvinar etiam non quam. Leo vel fringilla est ullamcorper eget nulla facilisi etiam. In aliquam sem fringilla ut morbi. Quam elementum pulvinar etiam non quam. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Ut diam quam nulla porttitor massa id neque. Fermentum leo vel orci porta non pulvinar neque laoreet. Pellentesque elit ullamcorper dignissim cras tincidunt. Nisl pretium fusce id velit ut tortor pretium viverra. Sed arcu non odio euismod. Maecenas accumsan lacus vel facilisis volutpat. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Mollis nunc sed id semper risus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Ut aliquam purus sit amet luctus venenatis lectus. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Ipsum dolor sit amet consectetur. Pellentesque nec nam aliquam sem et. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim. Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Eleifend donec pretium vulputate sapien nec. Sit amet aliquam id diam maecenas ultricies mi eget. Tempor orci eu lobortis elementum. Erat imperdiet sed euismod nisi porta. Sagittis purus sit amet volutpat. Congue mauris rhoncus aenean vel elit scelerisque. Aliquam eleifend mi in nulla posuere. Tempus egestas sed sed risus pretium quam vulputate dignissim. Etiam tempor orci eu lobortis elementum nibh tellus. Felis donec et odio pellentesque diam volutpat commodo. Elit pellentesque habitant morbi tristique senectus et netus et. Mauris cursus mattis molestie a iaculis. Ultrices sagittis orci a scelerisque. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Mi ipsum faucibus vitae aliquet. Mauris a diam maecenas sed. Neque vitae tempus quam pellentesque nec nam aliquam sem.</p> </div> </div> <!--/row--> <div class="row mt-4"> <div class="col-6 offset-3"> <a class="btn btn-outline-primary" id="testBtn" href="#">Create Toast</a> </div> </div> <!--/row--> </div> <!--container--> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>

每次我展示新吐司时，页面都会滚动到顶部。 如何防止这种情况发生？

Answer 1

事实证明，页面一直滚动到顶部，因为我一直在单击带有链接到#的锚元素（即<a href="#">...</a> ）。 因此，我只是在显示toast元素的功能顶部添加了以下内容，因此当用户单击链接时，它阻止了默认操作：

const showToast = function(event) {
  event.preventDefault();
  ...
}

那行得通。 抱歉，如果您必须仔细阅读上述冗长的问题，我只是想尽可能详细地说明这一点。

♂️

给可能正为自举烤面包苦苦挣扎的其他人提供的另一个注意事项-更改要fixed的容器的位置，以便在视口中滚动。

<div id="toastDrawer" aria-live="polite" aria-atomic="true" style="position: fixed; top: 0; right: 0; z-index: 999999;"></div>

无论用户在何处滚动，上述代码都将其保留在视口/屏幕的右上角。 只要确保将您的吐司添加/添加到上述吐司“抽屉”中即可。

我在其他任何地方都找不到清晰的文字（对于那些不熟悉CSS的人）。

使用Bootstrap 4的Toast组件显示动态创建的Toast时，如何防止页面滚动？

问题描述

1 个解决方案

解决方案1
0 2019-07-26 17:46:50

使用Bootstrap 4的Toast组件显示动态创建的Toast时，如何防止页面滚动？

问题描述

1 个解决方案

解决方案1 0 2019-07-26 17:46:50

解决方案1
0 2019-07-26 17:46:50