locked
Pull down to refresh

    Question

  • I want to implement pull-down-to-refresh functionality on a div.

    When user scrolls the div up to 30px beyond the scollable area and relase it, the content in the div should be refreshed.

    How can i do this?

    Thursday, August 1, 2013 8:29 AM

Answers

  • Hi vishal,

    Thanks for posting!

    I write the below code to test pull-down-to-refresh function ,It works fine.

    And I am glad to introduce to this plugin to you ----"iscroll".

    I suggest you can try this.

        <script src="js/iscroll.js"></script>
        <script src="js/iscroll-lite.js"></script>
    
    </head>
    <body>
        <p>Content goes here</p>  
        <div id="wrapper">
            
        <div id="cc" style="height:250px;width:200px;overflow-y:scroll;overflow-x:hidden;"  >
            <li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li>
            <li>09</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li>
            <li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
            <li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li>
            <li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li>
            <li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li>
        </div>
        </div>
    
            <script type="text/javascript">
    
            var myScroll;
            function loaded() {
                setTimeout(function () {
                    myScroll = new iScroll('wrapper');
                }, 100);
            }
            window.addEventListener('load', loaded, false);
    
    </script>

    You can download this js file from http://cubiq.org/iscroll-4.

    This js plugin can be used in web page and winjs.

    Thanks,

    • Marked as answer by vishal.p Monday, August 5, 2013 4:51 AM
    Saturday, August 3, 2013 8:04 AM
    Moderator
  • The best way to do this is by using chained scrollers with a mandatory snap point. Any JavaScript solution is going to be CPU bound so it wouldn't buttery smooth on any device, especially under load or low-spec.

     I have the full write up of the solution and code on my blog, check it out: http://dwcares.com/pull-to-refresh-2/

    Cheers,
    David Washington
    Microsoft

    • Marked as answer by vishal.p Monday, October 7, 2013 5:14 AM
    Monday, October 7, 2013 4:54 AM

All replies

  • Hi vishal,

    Thanks for posting!

    I write the below code to test pull-down-to-refresh function ,It works fine.

    And I am glad to introduce to this plugin to you ----"iscroll".

    I suggest you can try this.

        <script src="js/iscroll.js"></script>
        <script src="js/iscroll-lite.js"></script>
    
    </head>
    <body>
        <p>Content goes here</p>  
        <div id="wrapper">
            
        <div id="cc" style="height:250px;width:200px;overflow-y:scroll;overflow-x:hidden;"  >
            <li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li>
            <li>09</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li>
            <li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
            <li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li>
            <li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li>
            <li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li>
        </div>
        </div>
    
            <script type="text/javascript">
    
            var myScroll;
            function loaded() {
                setTimeout(function () {
                    myScroll = new iScroll('wrapper');
                }, 100);
            }
            window.addEventListener('load', loaded, false);
    
    </script>

    You can download this js file from http://cubiq.org/iscroll-4.

    This js plugin can be used in web page and winjs.

    Thanks,

    • Marked as answer by vishal.p Monday, August 5, 2013 4:51 AM
    Saturday, August 3, 2013 8:04 AM
    Moderator
  • Thanks Will...

    Monday, August 5, 2013 4:52 AM
  • But on RT Surface it dosen't scroll fast, the response of iScroll is very slow on RT Surface.

    What should i do to make it work faster?

    Tuesday, August 6, 2013 5:19 AM
  • The best way to do this is by using chained scrollers with a mandatory snap point. Any JavaScript solution is going to be CPU bound so it wouldn't buttery smooth on any device, especially under load or low-spec.

     I have the full write up of the solution and code on my blog, check it out: http://dwcares.com/pull-to-refresh-2/

    Cheers,
    David Washington
    Microsoft

    • Marked as answer by vishal.p Monday, October 7, 2013 5:14 AM
    Monday, October 7, 2013 4:54 AM