如何使用 javascript 將滾動條移動到頂部/向上方向？
[英]How to move scroll into top/up direction by using javascript?
問題描述
單擊頂部箭頭時，我想將滾動條移動到頂部方向。 底部箭頭有效，但我無法糾正頂部箭頭無效的原因。
我已經添加了一個片段來理解這個問題是否需要任何其他澄清然后請發表評論。
提前致謝。
<html> <head> <style type='text/css'>.content-container { height:250px; width:250px; overflow: auto; border:1px solid; padding:0 15px; }::-webkit-scrollbar { width:7px; height:7px; background: #80808045; } /* Track */::-webkit-scrollbar-track { } /* Handle */::-webkit-scrollbar-thumb { background:#4cae35; } </style> <script src="https://pcbmagic.com/assets/cdn/jquery.min.js"></script> </head> <body> <p id="my-scroll-buttom-button">⬆️</p> <div class="content-container" id="content-container"> <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). . </p> </div> <p id="my-scroll-top-button">⬇️</p> <script> document.getElementById( "my-scroll-top-button" ).onclick = () => { document.getElementById( "content-container" ).scrollTop += 30; } document.getElementById( "my-scroll-buttom-button" ).onclick = () => { document.getElementById( "content-container" ).scrollBottom -= 30; } </script> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2021-09-30 07:34:10
就像@Ouroborus 說的，
.scrollBottom 應該是 .scrollTop
<html> <head> <style type='text/css'>.content-container { height:250px; width:250px; overflow: auto; border:1px solid; padding:0 15px; }::-webkit-scrollbar { width:7px; height:7px; background: #80808045; } /* Track */::-webkit-scrollbar-track { } /* Handle */::-webkit-scrollbar-thumb { background:#4cae35; } </style> <script src="https://pcbmagic.com/assets/cdn/jquery.min.js"></script> </head> <body> <p id="my-scroll-buttom-button">⬆️</p> <div class="content-container" id="content-container"> <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). . </p> </div> <p id="my-scroll-top-button">⬇️</p> <script> document.getElementById( "my-scroll-top-button" ).onclick = () => { document.getElementById( "content-container" ).scrollTop += 30; } document.getElementById( "my-scroll-buttom-button" ).onclick = () => { document.getElementById( "content-container" ).scrollTop -= 30; } </script> </div> </body> </html>
如何使用JavaScript檢測不可滾動元素中的滾動事件和方向？
[英]How to detect scroll event and direction in a not scrollable element using javascript?
如何使用 javascript 更改 React js 中的滾動方向並獲取滾動變量
[英]How can I change the scroll direction in React js using javascript and get the scroll variables
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.