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滚动到结尾

回答

相关问题