讓DIV中的垂直滾動條自動滾到最底部

在聊天窗口中當消息增多超過消息窗體DIV的高度時就會出現滾動條，但此時滾動條在絕大多數瀏覽器中都始終位於DIV的頂部，這樣就會導致之后的消息看不見，必須往下拖動滾動條才能看到新的消息，如果做到當出現滾動條時，滾動條始終位於DIV的底部呢？

方式一：設置DIV的scrollTop=scrollHeight;

方式二：在DIV的底部添加一隱藏元素element，然后調用element.scrollIntoView()。這里的scrollIntoView是原生的方法，通過名稱我們就不難發現該方法用來使元素滾動到可視區域。

為了簡單起見直接將兩種方式放在一起。

 
          < 
          html 
          > 
          
 
          < 
          head 
          > 
          
 
          < 
          style  
          type 
          ="text/css" 
          > 
          
 div 
          { 
          margin 
          : 
          0px 
          ; 
          padding 
          : 
          0px 
          ; 
          } 
          
 #main 
          { 
          width 
          : 
          380px 
          ; 
          height 
          : 
          102px 
          ; 
          overflow-y 
          : 
          auto 
          ; 
          border 
          : 
          1px solid #ddd 
          ; 
          padding 
          : 
          0 10px 0 10px 
          ; 
          } 
          
 #content 
          { 
          width 
          : 
          350px 
          ; 
          line-height 
          : 
          20px 
          ; 
          } 
          
  
          </ 
          style 
          > 
          
 
          < 
          script  
          type 
          ="text/javascript" 
          > 
          
   window.onload 
          = 
          function 
          (){
      
          var 
           i 
          = 
          1 
          ;
      
          var 
           hid 
          = 
          document.getElementById( 
          ' 
          msg_end 
          ' 
          ); 
          // 
          隱藏在消息框下面的元素 
          
  
               
          var 
           btn 
          = 
          document.getElementById( 
          ' 
          btnSend 
          ' 
          ); 
          // 
          添加消息的按鈕 
          
  
               
          var 
           cont 
          = 
          document.getElementById( 
          ' 
          content 
          ' 
          ); 
          // 
          消息框 
          
  
               
          var 
           mai 
          = 
          document.getElementById( 
          ' 
          main 
          ' 
          );
     btn.onclick 
          = 
          function 
          (){
         cont.innerHTML 
          += 
          ' 
          消息內容 
          ' 
          + 
          i 
          + 
          ' 
          <br/> 
          ' 
          ;
          
          // 
          hid.scrollIntoView(false);//方式1通過調用隱藏元素的scrollIntoView()方法使其可見 
          
  
                   
          // 
          mai.scrollTop=mai.scrollHeight;//方式2通過設置滾動高度 
          
  
                  i 
          ++ 
          ;
     }
   }
  
          </ 
          script 
          > 
          
 
          </ 
          head 
          > 
          
 
          < 
          body 
          > 
          
 
          < 
          div  
          id 
          ="main" 
          > 
          
    
          < 
          div  
          id 
          ="content" 
          ></ 
          div 
          > 
          
    
          < 
          span  
          id 
          ="msg_end" 
           style 
          ="overflow:hidden" 
          ></ 
          span 
          > 
          
 
          </ 
          div 
          > 
          
 
          < 
          input  
          type 
          ="button" 
           id 
          ="btnSend" 
           value 
          ="添加" 
          /> 
          
 
          </ 
          body 
          > 
          
 
          </ 
          html 
          > 
         

效果如下，滾動條始終最底部