使用 Sweetalert2 时箭头键滚动站点

Question

我使用 Sweetalert2 制作了弹出式警报。我希望能够使用箭头键在接受和拒绝之间进行选择。但是，它也会影响网站本身，它在后台滚动。我添加了代码（左右箭头键也会影响背景）。滚动条隐藏在网站中，所以我假设它在某种程度上与此有关。

我该怎么做才能让箭头只影响选择？ table 仅在代码中存在，以使网站足够宽以便示例可滚动。

    Swal.fire({
    width: '16rem',
  title: 'CALL!',
  text: "Take call?",
  showDenyButton: true,
  showCancelButton: false,
  confirmButtonColor: '#353535',
  denyButtonColor: '#353535',
  confirmButtonText: 'Yes',
  denyButtonText: 'No',
  allowOutsideClick: false,
  keydownListenerCapture:true,
  stopKeydownPropagation:true
})

.swal2-popup .swal2-styled:focus {
    opacity: 1!important;
    background-color: #6D9E18!important;
    color: white!important;
    box-shadow:none!important;
}

.swal2-styled .swal2-confirm:focus {
    opacity: 1!important;
    background-color: #6D9E18!important;
    color: white!important;
    box-shadow:none!important;
}
.swal2-styled.swal2-default-outline:focus{
    opacity: 1!important;
    background-color: #6D9E18!important;
    color: white!important;
    box-shadow:none!important;
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover{
   opacity: 1!important;
    background-color: #6D9E18!important;
    color: white!important;
    box-shadow:none!important;
}

html, body{
  background-color: #353535;
  color : #FCFCFC;
  font-family: 'Quicksand';
  font-weight : 700;
  font-size : 4.5vh;
  border-width: 0px;
  border: none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0px;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
 <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
 <table width="2000px">
 <tr>
   <td>djwaodjsakdjlsakdjsalkdjsalkdjalksfhuebgnmsdvbmncxbvmcxbvhkbmdnbvmnxcbvmnxcbvmncxbvmnxcbvnmcxbvkjadbvdbvhsdbvkdsvbhds</td>
 </tr>
 </table>

Answer 1

通过将 html, body { 替换为 body {

取消 html 的样式

使用 Sweetalert2 时箭头键滚动站点

Arrow keys scroll the site when using Sweetalert2

javascript

sweetalert

sweetalert2