將按鈕綁定到“滾動鼠標滾輪”

Question

我有一個 div question_text with overflow: auto 有時需要向上/向下滾動才能查看全文。

我想綁定向上/向下鍵以向上和向下滾動，但試圖找到一種方法來做到這一點，我找到的唯一答案是使用 Jquery/Angular，但我無法清楚地閱讀/理解正在發生的事情. 我正在努力使我的代碼保持干凈和可讀，所以我想找到一種簡單的方法。

我有一個用於熱鍵的 checkKey 函數，我想做這樣的事情。

function checkKey(keypress) {
let key_code = keypress.keyCode
if (key_code === 40) {
//mouse_wheel.down(2)
     }
}

我假設必須有某種方法可以直接發送命令“向下滾動鼠標滾輪 x 量”。 這是可能的，還是我需要使用我發現的 50 多行代碼片段之一來使元素可滾動？

此外，我知道使用這個想法時焦點是一個問題，但是由於我的 question_text 元素始終處於焦點狀態並且不需要滾動我網站/應用程序的其余部分，我的計划是始終將 question_text 設置為焦點以確保鍵綁定始終有效。

Answer 1

您可以使用scrollBy直接滾動內容，而不是觸發鼠標滾輪。

將behavior設置為smooth也會為滾動設置動畫。

下面是一個例子：

 const div = document.querySelector('div'); document.body.addEventListener('keydown', event => { if (event.keyCode === 38) { div.scrollBy({ top: -200, behavior: 'smooth' }); event.preventDefault(); } else if (event.keyCode === 40) { div.scrollBy({ top: 200, behavior: 'smooth' }); event.preventDefault(); } });

 div { width: 400px; height: 200px; overflow: hidden; }

 <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tempus felis. Vestibulum convallis magna metus, eleifend fringilla erat egestas id. Morbi pretium est purus, et faucibus lorem luctus id. Praesent eget lorem vitae augue consequat placerat eu laoreet libero. Donec efficitur sit amet dui vel congue. Maecenas tempor ante ligula, ut tincidunt turpis euismod a. Cras iaculis, justo sit amet mattis ultrices, nibh velit bibendum urna, sed auctor tortor mauris a tortor. Vivamus facilisis ultrices massa convallis porta. Sed justo enim, ornare eu iaculis vitae, fermentum placerat purus. Nulla sodales, nulla at aliquet accumsan, urna eros aliquam quam, ac tempor erat justo non justo. Cras interdum quam enim, nec blandit augue feugiat ut. Aliquam faucibus auctor maximus.</p> <p>Phasellus pretium nisl libero, at vehicula dolor bibendum id. Nam quis purus et ligula lobortis tincidunt id et metus. Quisque sapien quam, ultrices non justo ac, commodo tristique quam. Etiam tincidunt vel augue pretium finibus. Maecenas libero velit, tempus id nibh vel, posuere mattis turpis. Donec efficitur ipsum magna, sed tempor mi auctor id. Vestibulum imperdiet orci vehicula, euismod mi non, sollicitudin arcu. Proin molestie porta fermentum. Aliquam tincidunt nisi nec lacus eleifend, at sollicitudin felis volutpat.</p> <p>In at bibendum neque, sed laoreet mauris. Mauris at nisi at felis ultricies imperdiet. Integer vel fringilla lorem. Quisque vel tellus ut dui maximus pharetra. Aliquam sit amet tincidunt arcu, sed ullamcorper elit. Morbi at sem imperdiet, fringilla lacus eu, lobortis risus. Ut tempor congue lacus quis fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce luctus ipsum est. Etiam ornare ultricies ante, venenatis imperdiet purus tempus ullamcorper. Duis risus lectus, pharetra vel consequat et, dictum nec ligula. Cras ultricies, turpis quis ultricies porta, nisi est hendrerit ipsum, egestas suscipit magna erat non ante. Nullam accumsan porttitor mi viverra sagittis. In hac habitasse platea dictumst. Proin rutrum ipsum aliquam elit viverra, a mattis orci egestas.</p> <p>Fusce non auctor orci, non consequat elit. Duis scelerisque convallis imperdiet. In scelerisque, libero eget dignissim semper, tellus nibh elementum sapien, id sagittis lorem mauris quis turpis. Sed nec pellentesque lacus. Integer non arcu egestas dolor suscipit faucibus. Vestibulum scelerisque, nulla ac venenatis accumsan, neque erat pellentesque quam, non sollicitudin dui augue vel massa. Aliquam commodo ligula nec mattis pharetra. Nulla gravida mi nec urna auctor, sit amet ultrices erat eleifend. Aenean lectus est, sagittis non ultricies eget, blandit et ante.</p> <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas interdum nunc neque, vel ultrices risus posuere ac. Proin egestas tortor vitae enim interdum, et dignissim arcu molestie. Praesent et posuere est. Vivamus pulvinar dignissim est eu dictum. Sed in consectetur felis. Vivamus interdum tellus quis ornare efficitur. Praesent risus lectus, sagittis sit amet malesuada et, ultrices non sem. Vivamus tincidunt fermentum rhoncus. Sed ornare ex et interdum aliquet. Vivamus vel hendrerit sem. In sit amet faucibus felis. Quisque quis eros lectus. Suspendisse condimentum, orci vel tristique tempor, ipsum dui sagittis eros, eu scelerisque tellus leo nec erat. Proin tempus egestas vestibulum. Maecenas sagittis, ante nec ultrices aliquam, est nisi luctus sapien, non imperdiet sem eros vel nisl.</p> <p>Vivamus ac arcu malesuada, vehicula felis sit amet, molestie massa. Etiam lectus leo, facilisis at urna sit amet, ullamcorper iaculis libero. Vestibulum imperdiet elit diam, eu euismod purus aliquet et. Integer quis elementum lacus. Curabitur imperdiet urna quis justo pharetra tristique. In ipsum quam, cursus id neque eu, fermentum sagittis orci. Aenean non diam eros. Curabitur vitae aliquet augue. Phasellus eget dictum nisl.</p> <p>Vivamus sollicitudin ante in tempus fermentum. Aenean ipsum tellus, feugiat ornare ante vitae, rhoncus accumsan felis. Aliquam mattis vehicula nisl, sit amet efficitur dui aliquet eu. Etiam et sodales ante. Proin ullamcorper leo at felis finibus congue. Nunc vel dapibus dolor. Aliquam gravida quam ante, vitae accumsan lacus semper a. Nunc semper quam arcu, ac tristique nunc dignissim convallis. Mauris commodo est vestibulum efficitur vehicula. Vivamus ac ex arcu. Quisque in commodo velit, vel pharetra massa. Nam egestas nulla ut dignissim varius. Nulla facilisi. Duis molestie nec ligula et hendrerit. Suspendisse convallis maximus felis vel aliquet.</p> <p>Nunc maximus nisl ut rhoncus elementum. Cras posuere fermentum facilisis. Cras venenatis massa a quam bibendum convallis. Sed ornare elit nec est feugiat interdum. Fusce euismod suscipit massa, et tempor diam ultrices eget. Vivamus vitae rutrum ante. Sed ornare odio at libero interdum, a varius nunc rhoncus. Praesent cursus rhoncus urna, eu euismod ex sollicitudin volutpat. Pellentesque in laoreet massa. In eget ipsum pulvinar, ultrices odio in, ultrices sapien. Morbi nibh purus, vulputate non diam eget, pretium maximus augue. Ut vestibulum molestie magna, in accumsan magna sagittis et. Vivamus lobortis, arcu ac egestas iaculis, massa metus pellentesque leo, id sodales velit enim eget ipsum. Mauris justo quam, aliquam vel urna non, mattis consequat erat. Vestibulum dolor diam, egestas vitae interdum eget, sagittis et nisi.</p> <p>Duis sit amet fringilla sem, quis fermentum turpis. Nunc et placerat erat. Nulla turpis ligula, suscipit sit amet ipsum sed, semper viverra diam. Pellentesque convallis venenatis leo, et lobortis libero hendrerit in. Nulla ut sodales quam. In blandit nunc ac quam tristique convallis. Praesent posuere lectus nec risus porttitor, id laoreet augue volutpat. Maecenas tempor a massa vitae rutrum. Curabitur ac elementum dolor. Nunc lectus erat, ultricies et maximus ut, venenatis dignissim turpis. Ut metus neque, suscipit et interdum eget, egestas eget ligula. Vivamus a leo nec purus fermentum luctus vitae et purus. Nam eget sapien viverra, interdum arcu sit amet, aliquam dui. Pellentesque scelerisque vulputate libero et posuere.</p> <p>Quisque nibh tortor, condimentum non lobortis at, maximus sit amet risus. Nunc congue, ex sit amet luctus porttitor, nisl est pretium ex, quis posuere nunc arcu non purus. Praesent pharetra, urna ac commodo molestie, ante massa dapibus enim, vel sollicitudin elit nibh non eros. Aenean enim neque, bibendum vel ornare non, porta mattis quam. Quisque nisl risus, congue eu purus ac, euismod dapibus purus. Integer facilisis egestas eleifend. Sed in pharetra nunc, ac luctus enim. Maecenas venenatis enim eget ornare tempus. Maecenas eu eleifend enim. Integer ac libero lobortis, semper leo condimentum, condimentum lacus. In sed arcu sollicitudin, rutrum dui quis, bibendum ante. Sed porta vel purus sed ornare. Morbi tincidunt augue sit amet imperdiet ornare. Cras pellentesque nibh libero, id vehicula ligula lobortis a. Fusce mollis luctus leo vitae sollicitudin.</p> </div>