jquery waypoint бесконечный прокрутка не работает

Я пытаюсь реализовать простую бесконечную прокрутку для элементов div с помощью путевых точек. , поэтому я последовал их учебнику и придумал очень простую разметку, но это не сработает. любые предложения?jquery waypoint бесконечный прокрутка не работает

код:

<!DOCTYPE html> 
<html lang="en" class=" js flexbox opacity"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<title>Infinite SCroll - test</title> 
    <script src="jquery-1.11.1.min.js"></script> 
    <script src="jquery.waypoints.min.js"></script> 
    <script src="infinite.js"></script> 


    <link href="style.css" rel="stylesheet"> 

    <script> 
     function infiniteExample() { 
     var infinite = new Waypoint.Infinite({ 
      element: $('.infinite-container')[0] 
     }) 
     } 
    </script> 
</head> 
<body> 



<div class="infinite-container waypoint"> 
    <div class="infinite-item">1</div> 
    <div class="infinite-item">2</div> 
    <div class="infinite-item">3</div> 
    <div class="infinite-item">4</div> 
    <div class="infinite-item">5</div> 
    <div class="infinite-item">6</div> 
    <div class="infinite-item">7</div> 
    <div class="infinite-item">8</div> 
    <div class="infinite-item">9</div> 
    <div class="infinite-item">10</div> 
<div class="infinite-item">11</div><div class="infinite-item">12</div><div class="infinite-item">13</div><div class="infinite-item">14</div><div class="infinite-item">15</div><div class="infinite-item">16</div><div class="infinite-item">17</div><div class="infinite-item">18</div><div class="infinite-item">19</div><div class="infinite-item">20</div><div class="infinite-item">21</div><div class="infinite-item">22</div><div class="infinite-item">23</div><div class="infinite-item">24</div><div class="infinite-item">25</div><div class="infinite-item">26</div><div class="infinite-item">27</div><div class="infinite-item">28</div><div class="infinite-item">29</div><div class="infinite-item">30</div><div class="infinite-item">31</div><div class="infinite-item">32</div><div class="infinite-item">33</div><div class="infinite-item">34</div><div class="infinite-item">35</div><div class="infinite-item">36</div><div class="infinite-item">37</div><div class="infinite-item">38</div><div class="infinite-item">39</div><div class="infinite-item">40</div></div> 
</div> 



</body></html>

источник

2016-09-25 Katia Budnik

Вы должны добавить <a> тег с атрибутами class="infinite-more-link" и href="/next/page" в конце:

<a class="infinite-more-link" href="/next/page">More</a>

Полный код выглядит следующим образом:

<!DOCTYPE html> 
<html lang="en" class=" js flexbox opacity"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <title>Infinite SCroll - test</title> 
    <script src="jquery-1.11.1.min.js"></script> 
    <script src="jquery.waypoints.min.js"></script> 
    <script src="infinite.js"></script> 

    <link href="style.css" rel="stylesheet"> 

    <script> 
    function infiniteExample() { 
     var infinite = new Waypoint.Infinite({ 
     element: $('.infinite-container')[0] 
     }) 
    } 
    </script> 
</head> 

<body> 

    <div class="infinite-container waypoint"> 
    <div class="infinite-item">1</div> 
    <div class="infinite-item">2</div> 
    <div class="infinite-item">3</div> 
    <div class="infinite-item">4</div> 
    <div class="infinite-item">5</div> 
    <div class="infinite-item">6</div> 
    <div class="infinite-item">7</div> 
    <div class="infinite-item">8</div> 
    <div class="infinite-item">9</div> 
    <div class="infinite-item">10</div> 
    </div> 

    <a class="infinite-more-link" href="/next/page">More</a> 

</body> 
</html>

И тогда вы должны подготовить /next/page для путевых точек для извлечения данных с сервера. Это будет возвращать что-то вроде этого:

<div class="infinite-item">11</div> 
<div class="infinite-item">12</div> 
<div class="infinite-item">13</div> 
<div class="infinite-item">14</div> 
<div class="infinite-item">15</div> 
<div class="infinite-item">16</div> 
<div class="infinite-item">17</div> 
<div class="infinite-item">18</div> 
<div class="infinite-item">19</div> 
<div class="infinite-item">20</div>

Недавно загруженные элементы добавляются к infinite-container.

источник

2016-12-19 07:47:17

jquery waypoint бесконечный прокрутка не работает

ответ

Смежные вопросы