如何防止计数器增加到超过元素的高度？
[英]How do I prevent the counter from incrementing past the height of the element?
问题描述
I have a web app where I am creating a scrollable element within the page. 
我有一个Web应用程序，正在页面中创建可滚动元素。 This is a scrollable element within a scrollable page, which is difficult and irritating for those with touchscreens and smartphone devices. 这是可滚动页面中的一个可滚动元素，这对于带有触摸屏和智能手机设备的用户来说既困难又烦人。 Instead, for smaller devices, I have implemented scrolling buttons. 相反，对于较小的设备，我实现了滚动按钮。 Instead of scrolling with a scroll bar, there will be a "up" and "down" button. 除了使用滚动条进行滚动外，还有一个“向上”和“向下”按钮。 How do I keep the counter from incrementing once at the bottom of the element? 如何防止计数器在元素底部递增一次？
Here is the code: 这是代码：
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <meta name="author" content="Hayden Bradfield"/> <style type="text/css"> button{display:block;} div{width:100px;height:100px;border:1px solid black;overflow:hidden;} </style> </head> <body> <button id="scrollup">Up</button> <div id="container"> <p>ksmdaksksmd ka sl sla skd ask alk dksas kc ds ks cdks cjskc s cks jdcksd jd csc k cdskjdnsj sdkfjks fj sjk jd jf jd ksf dfjks dsjk js jkf k fjkd jks fj dsjf d fk ks jkf jdfsd j dsdk jk fjdk sj fjd fks sd abcdef</p> </div> <button id="scrolldown">Down</button> <script type="text/javascript"> var scrollupbut = document.querySelector('#scrollup'); var scrolldownbut = document.querySelector('#scrolldown'); var container = document.querySelector('#container'); var counter = 0; scrolldownbut.addEventListener('click',function(){ var addvals = counter += 10; container.scrollTop = counter; console.log(counter); }); scrollupbut.addEventListener('click',function(){ if(counter > 0){ counter -= 10; container.scrollTop = counter; console.log(counter); } }); </script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2018-03-10 12:51:47
You can calculate the maximum value for scrollTop with scrollHeight - clientHeight , and then check to see if that distance has been reached each time the scrollDown button is pressed. 您可以使用scrollHeight - clientHeight计算scrollTop的最大值，然后每次按一下向下滚动按钮，检查是否已达到该距离。
const maxScrollTop=container.scrollHeight - container.clientHeight;
if (counter+10<=maxScrollTop) { counter += 10; }
Demo: 演示：
.as-console-wrapper { max-height: 20px !important; bottom: 0 }
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <meta name="author" content="Hayden Bradfield"/> <style type="text/css"> button{display:block;} div#container{width:100px;height:100px;margin:10px;border:1px solid black;overflow:hidden;} </style> </head> <body> <button id="scrollup">Up</button> <div id="container"> <p>ksmdaksksmd ka sl sla skd ask alk dksas kc ds k sk fjdk sj fjd fks sd abcdef ask alk dksas kc ds k sk fjdk sj fjd fks sd ab</p> </div> <button id="scrolldown">Down</button> <script type="text/javascript"> var scrollupbut = document.querySelector('#scrollup'); var scrolldownbut = document.querySelector('#scrolldown'); var container = document.querySelector('#container'); var counter = 0; const maxScrollTop=container.scrollHeight - container.clientHeight; scrolldownbut.addEventListener('click',function(){ if (counter+10<=maxScrollTop) { counter += 10; } container.scrollTop = counter; console.log(counter); }); scrollupbut.addEventListener('click',function(){ if(counter > 0){ counter -= 10; container.scrollTop = counter; console.log(counter); } }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.