JS小練習——スクロールバーが最終部かどうかを判断する(onscroll事件)

11366 ワード

JavaScript

機能の要求を実現します.このスクロールバーを下に引くと、一番下に到達したかどうかを判断します.一番下に着いたら、二つのフォームの項目はクリックできます.もし到着しなかったら、クリックしてはいけません.そして最初のボタンをチェックしてから提出できます.
disabled属性は、checkboxを無効にするかどうかを設定または戻すことができます.構文:Object.disabled=true false trueはfalse表現を無効にすることができます.
clientWidth clientHeightの2つの属性は、要素の可視高さと幅を取得することができます.コンテンツエリアと内部マージンを含む要素の幅と高さを取得します.
offset Width offset Height取得要素の幅と高さの全体は、コンテンツ領域と内部余白、外枠を含む.
scrollLeftは、水平スクロールバーの距離scrollTopを取得し、垂直スクロールバーの距離を取得することができる.
scrollwidth scrollHeightは元素のスクロール領域全体の幅と高さを得ることができる.
等式成立時には垂直スクロールバーが最下部のObject.scrollHeight-Object.scrollTop=Object.clientHeightに到達することを表します.
等式が成立すると、水平スクロールバーが最右端に到達することを表します.Object.scrollwidth-Object.scrollLeft=Object.clientWidth


<html>
<head>
<meta charset="utf-8">
<title>     title>
	<style>
		#info{
			width:300px;
			height:500px;
			background-color: #bfa;
			overflow: auto;
		}
	style>
	<script>
		window.onload=function(){
			/*
			               
			onscroll
				               
			*/
			//  id info p  
			var info=document.getElementById("info");
			var btn01=document.getElementById("btn01");
			var btn02=document.getElementById("btn02");
			// info           
			info.onscroll=function(){
				//            
				if(info.scrollHeight-info.scrollTop==info.clientHeight){
					//         
					btn01.disabled=false;
					btn02.disabled=false;	
				}
			}
			
			//                ，        
			btn02.onclick=function(){
			if(btn01.checked==true){
             		alert("       ！");
         		}
				else{
					alert("          ，  ！");
        			}
			}
		}	 	
	script>
head>

<body>
	<h1>         h1>
	<p id="info">	
 、    

1、               “  ”  。“  ”              ，        “  ”         ，                      “  ”  。                                ，         。

2、“  ”              ，                               “  ”  。                    、              。                     ，          。

3、  “  ”         ，                       /                                。          ，                        “  ”    ，               （        ），              ，        。             /                 ，                 ，             。

4、            ，                                    ，             。                    、  、  、    、    、  、    、    、    、    、      、    ；                                  
	p>
	
	<input type="checkbox" disabled="disabled" id="btn01">            
	<input type="submit" disabled="disabled" value="  " id="btn02">
body>
html>

JavaScript配列は操作関数を巡回します.