Question

我的网站有一个Bootstrap模式。我的最终目标是向模态添加无限滚动，以便当用户向下滚动到模态的底部时，它会从服务器加载更多数据并将数据附加到模态。

到目前为止，这是我的代码。我现在所拥有的只是模态上的滚动事件：

http://jsfiddle.net/DTcHh/33247/

注意：我网站上模式的高度可能会有所不同。有时它可能只是一段文字。

我的问题是，如何检查用户是否接近滚动到模态的底部？

在更多技术术语中，如何检查窗口底部是否与模态底部位于同一位置？

更新

我发现这个解决方案有效，但是看起来有点复杂/冗长。有什么方法可以缩短它吗？

http://jsfiddle.net/DTcHh/33271/

HTML：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS：

$("#exampleModalLong").on("scroll", function() {
    console.log("scroll");
});

Answer 1

我不是JavaScript方面的专家，我个人每次需要记住文档，窗口和视口之间的差异时，我必须回到文档，当我必须处理滚动事件时，我认为这会让你轨道。

注意：这将适用于整个文档的滚动事件，尝试将其应用到模态的body标签并告诉我：

//in this test case your limit is going to be 20
$(document).scroll(function (){
    if($(this).height() - $(this).scrollTop() - $(window).height() < 20){
        console.log('time to show new content');
    }
});

希望有所帮助

修改

$('.modal-content').scroll(function (){ if($(this).height() - $(this).scrollTop() - $('.modal-dialog').height() < 20){ console.log('time to show new content'); } });

如果你想要的是.modal-content在.modal-dialog内滚动，每次.modal-content的内容即将用完，请添加更多信息，那么我认为这就是你所需要的。

现在，如果您希望整个（我真的必须强调）模式滚动，而背景静止不动，请告诉我您是如何实现的它没有将其封装在其他任何东西中。
祝你好运，让我知道

ps：如果这样做，你应该看看Erik Philips'回答。

Answer 2

这个答案更像是J.M. Echevarría's Answer的限制版本（假设滚动代码是正确的）。有时会出现问题，您可以通过事件淹没浏览器（加载更多内容然后加载和/或减慢浏览器速度，这会给用户带来负面的网站体验）。

$(document).scroll(function (){
  var timerId;
  if($(this).height() - $(this).scrollTop() - $(window).height() < 20){
    clearTimeout(timerId);
    timerId = setTimeout(function(){
      console.log('time to show new content');
      }, 250);
  }
});

Answer 3

function emailSpreadsheetAsPDF() {

    var email = ""; // Enter the required email address here

    var ss = SpreadsheetApp.getActiveSpreadsheet();

    var sheet = ss.getSheetByName("**********"); // Enter the name of the sheet here

    var subject = "PDF generated from spreadsheet " + ss.getName();

    var body = "\n Attached is a PDF copy of the sheet " + sheet.getName() + " in the " + ss.getName() + " spreadsheet.";

    // Base URL
    var url = "https://docs.google.com/spreadsheets/d/SS_ID/export?".replace("SS_ID", ss.getId());

    /* Specify PDF export parameters
    From: https://code.google.com/p/google-apps-script-issues/issues/detail?id=3579
     */

    var url_ext = 'exportFormat=pdf&format=pdf' // export as pdf / csv / xls / xlsx
         + '&size=letter' // paper size legal / letter / A4
         + '&portrait=false' // orientation, false for landscape
         + '&fitw=true&source=labnol' // fit to page width, false for actual size
         + '&sheetnames=false&printtitle=false' // hide optional headers and footers
         + '&pagenumbers=false&gridlines=false' // hide page numbers and gridlines
         + '&fzr=false' // do not repeat row headers (frozen rows) on each page
         + '&gid='; // the sheet's Id

    var token = ScriptApp.getOAuthToken();

    var response = UrlFetchApp.fetch(url + url_ext + sheet.getSheetId(), {
            headers : {
                'Authorization' : 'Bearer ' + token
            }
        }).getBlob().setName(sheet.getName() + ".pdf");

    // Uncomment the line below to save the PDF to the root of your drive. 
    //  var newFile = DriveApp.createFile(response).setName(sheet.getName() + ".pdf")

    if (MailApp.getRemainingDailyQuota() > 0)
        GmailApp.sendEmail(email, subject, body, {
            htmlBody : body,
            attachments : [response]
        });
}

See

Answer 4

您可以考虑使用https://developer.mozilla.org/en/docs/Web/API/Element/scrollHeight来检查当前滚动位置

示例：

$("#exampleModalLong").on("scroll", function() {
var isEnd = this.scrollHeight - this.scrollTop === this.clientHeight;
if (isEnd) {
   alert('Bingo');
}
});

Answer 5

要检查您是否已到达引导程序模式的底部，可以使用以下代码段：

$('.modal').scroll(function() {
    if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
        alert('You have reached the bottom of the modal')
    } 
});

希望这有帮助!!!

检查用户是否接近滚动到元素的底部

更新

5 个答案: