如何防止计数器增加超过元素的高度？答案

【问题标题】：How do I prevent the counter from incrementing past the height of the element?如何防止计数器增加超过元素的高度？
【发布时间】：2018-03-10 12:28:39
【问题描述】：

我有一个网络应用程序，我在其中创建页面内的可滚动元素。这是可滚动页面中的可滚动元素，对于那些使用触摸屏和智能手机设备的人来说，这既困难又烦人。相反，对于较小的设备，我实现了滚动按钮。将有一个“向上”和“向下”按钮，而不是使用滚动条滚动。如何防止计数器在元素底部增加一次？

代码如下：

<!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 k s 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>

【问题讨论】：

标签： javascript html css web-applications

【解决方案1】：

您可以使用scrollHeight - clientHeight 计算scrollTop 的最大值，然后检查每次按下scrollDown 按钮时是否已达到该距离。

const maxScrollTop=container.scrollHeight - container.clientHeight;
if (counter+10<=maxScrollTop) { counter += 10; }

演示：

.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>

【讨论】：