滾動到底部後打開或關閉功能

我有一個「條款和條件」的div。它是一個可垂直滾動的div。這個想法是一直向下滾動，這將允許用戶然後提交（通過點擊提交按鈕）。但它不是一個真正的按鈕，而是一個帶有JavaScript函數的錨。滾動到底部後打開或關閉功能

<a onclick="showDialog();"><img 
    name="continue" value="Continue" alt="Continue" 
    src="${resource(dir: 'images/buttons', file: 'submit.gif')}" 
    border="0" /></a>

所以我需要做的是，當用戶向下滾動，它就會打開javascript函數，但將保持關閉狀態，如果沒有。

有什麼建議嗎？

來源

2010-11-01 Xtian

你能澄清「開/關」的功能？您是否打開/關閉用戶到達ToA結尾後提交表單的能力？ – shoebox639 2010-11-01 22:46:09

當用戶點擊錨時，它會運行showDialog（），我想只有當用戶滾動到T＆C的底部時纔可以使用該選項。 – Xtian 2010-11-01 22:49:21

div（）的scrollTop是可視區域頂部內下多遠。 div的height是用戶看到的數量。因此，div的scrollTop加上div的height必須至少與整個服務條款內部的總高度（我們稱之爲#termsInner）一樣多。

下面是一些例子HTML代碼：（注：您可以在http://jsfiddle.net/8U7GY/6/嘗試了這一點。）

<p id="instructions">Please read these terms and conditions now. 
<b>You must scroll to the bottom before continuing.</b></p> 

<div id="terms"> 
    <div id="termsInner"> 
     <p>Lorem ipsum...</p> 
    </div> 
</div> 

<span><a id="submit">Register me!</a></span>

一些CSS代碼：

p { 
    padding: 0.25em; 
} 

#terms { 
    border: solid 1px; 
    height: 24em; 
    overflow: auto; 
    margin-bottom: 1em; 
} 

#termsInner { 
    padding: 0.5em 0; 
} 

.highlighted { 
    background-color: #ff0; 
} 


#submit { 
    color: blue; 
    text-decoration: underline; 
}

和一些JavaScript代碼：（必須在$(function() { ... }）;因此只有在文檔準備好後才能執行。）

// Select the elements of the HTML page. 
var instructions = $('#instructions'), 
    terms = $('#terms'), 
    termsInner = $('#termsInner'), 
    submit = $('#submit'); 

// Bind an event handler that will run when the user 
// has not scrolled through the terms of service. 
submit.bind('click', function() { 
    // Highlight the instructions. 
    instructions.addClass('highlighted'); 

    // Remove the highlighting after two seconds. 
    setTimeout(function() { 
     instructions.removeClass('highlighted'); 
    }, 2000); 
}); 

// Once the user scrolls through, call showDialog instead 
// when the user clicks. 
terms.scroll(function() { 
    if (terms.scrollTop() + terms.height() >= termsInner.height()) { 
     submit.unbind('click').bind('click', showDialog); 
    } 
}); 

// This is where you would continue the user registration process. 
function showDialog() { 
    alert('whatever'); 
}

有幾件重要的事情需要注意。

我們不使用onclick HTML屬性，而是以編程方式使用bind和unbind綁定事件處理程序。這可以讓我們根據用戶是否滾動或不滾動來做出不同的事情。
jQuery提供scroll方法來註冊一個函數，以便在用戶滾動div時運行。我們檢查scrollTop和height的總和與div內的內容的高度，如果沒有問題，我們解除綁定原來的處理器並綁定一個新處理器。
我們強調說明（如果用戶還沒有向下滾動，但仍然點擊錨點）以便使用。如果用戶點擊並發現什麼都沒有發生，他會認爲註冊表不起作用，會離開您的網站，並留下不好的經歷。

編輯：修復它在Internet Explorer上的工作。由於IE的工作方式，您不能在div #terms本身設置填充，因此請在#termsInner之間設置填充。

來源

2010-11-02 00:36:01 PleaseStand

爲什麼div #terms上的填充設置導致它不能在IE中工作？ – Xtian 2010-11-05 14:29:21

您需要檢查<div>的scrollTop + height是否等於scrollHeight。

使用jQuery：

$('a').click(function(){ 
    var myDiv = $('div') 
    if (myDiv.scrollTop() + myDiv.height() == myDiv.get(0).scrollHeight) 
    { 
     showDialog(); 
    } 
    else 
    { 
     return false; 
    } 
});

您還可以檢查<div>的scrollTop的高度+上的滾動事件，然後啓用/禁用取決於scrollHeight屬性是否已經達到了錨。

來源

2010-11-01 23:10:05 Michal

> =？額外的字符.... – bevacqua 2010-11-02 01:05:00

我注意到，這個特殊的代碼不會讓用戶向下滾動，向上滾動（甚至略微），然後點擊鏈接。這可能是一個可用性問題。 – PleaseStand 2010-11-02 20:46:14

滾動到底部後打開或關閉功能

回答

相關問題