Javascript滾動到結尾

有時候軟件安裝程序會強制您在啓用「我同意」框之前滾動到EULA的末尾。我怎樣才能在網頁上產生相同的效果？Javascript滾動到結尾

2008-11-25 Jeremy Stein

爲什麼你要這麼做？沒有冒犯，但這是最令人討厭和無用的'功能'！ – 2008-11-25 17:14:25

<html> 
    <head> 
     <script type="text/javascript"> 
      function setupPage() { 
       var agreement = document.getElementById("agreetext"); 
       var visibleHeight = agreement.clientHeight; 
       var scrollableHeight = agreement.scrollHeight; 
       if (scrollableHeight > visibleHeight) { 
        var checkbox = document.getElementById("agreebox"); 
        checkbox.checked=false; 
        checkbox.disabled=true; 
        agreement.onscroll = handleScroll; 
       } 
      } 

      function handleScroll() { 
       var agreement = document.getElementById("agreetext"); 
       var visibleHeight = agreement.clientHeight; 
       var scrollableHeight = agreement.scrollHeight; 
       var position = agreement.scrollTop; 
       if (position + visibleHeight == scrollableHeight) { 
        document.getElementById("agreebox").disabled=false; 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <form> 
      <textarea id="agreetext" rows="8" cols="40">Long agreement</textarea> 
      <br/><br/> 
      <input type="checkbox" id="agreebox" value="true"/> <label id="agreelabel" for="agreebox">I agree</label> 
      <br/><br/> 
      <input type="submit" value="Continue"/> 
     </form> 
     <script type="text/javascript"> 
      // We put this at the end of the page rather than in an document.onload 
      // because the document.onload event doesn't fire until all images have loaded. 
      setupPage(); 
     </script> 
    </body> 
</html>

來源

2008-11-25 17:08:27

的代碼出色的一點，如果你也想在標籤中改變顏色旁邊的複選框，只需修改代碼如下：

function setupPage() { 
    var agreement = document.getElementById("agreetext"); 
    var visibleHeight = agreement.clientHeight; 
    var scrollableHeight = agreement.scrollHeight; 
    if (scrollableHeight > visibleHeight) { 
     var checkbox = document.getElementById("agreebox"); 
     checkbox.checked=false; 
     checkbox.disabled=true; 
     document.getElementById("agreelabel").style.color = "#777"; 
     agreement.onscroll = handleScroll; 
    } 
} 

function handleScroll() { 
    var agreement = document.getElementById("agreetext"); 
    var visibleHeight = agreement.clientHeight; 
    var scrollableHeight = agreement.scrollHeight; 
    var position = agreement.scrollTop; 
    if (position + visibleHeight == scrollableHeight) { 
     document.getElementById("agreebox").disabled=false; 
     document.getElementById("agreelabel").style.color = "black"; 
    } 
}

來源

2012-03-08 15:29:38

我用只讀文本區域來顯示我的許可協議。請注意，如果許可證協議文本不足以使textarea顯示滾動條，則此代碼將不起作用。

$(function() { 
    var serviceAgreementScrolled = false; 
    $('#service-agreement-textarea').scroll(
     function() { 
      if (this.scrollTop + $(this).height() + 30 >= this.scrollHeight) { 
       serviceAgreementScrolled = true; 
      } 
     } 
    ); 

    $('#accept-service-agreement-checkbox').change(
     function() { 
      if ($(this).is(':checked') && !serviceAgreementScrolled) { 
       alert('Please scroll to read the rest of the service agreement.'); 
       $(this).prop('checked', false); 
      } 
     } 
    ); 
});

<textarea id="service-agreement-textarea" readonly="readonly">Long long text here</textarea> 
<label> 
    <input type="checkbox" id="accept-service-agreement-checkbox" /> 
    I accept the terms of the service agreement 
</label>

來源

2015-04-09 04:34:41 Bassem

Javascript滾動到結尾

回答

相關問題