Geek Answers Handbook

Skrollr creates large spaces on the page

I am working on a site using scrollr.js and I am having a problem with height problems when entering elements. I am using scripts found on this template .

In the first screenshot, I get a big gap between my elements that disappear on both sides and the element below. However, in the second screenshot, you can see that when the page was refreshed, everything was fixed.

Screenshot 1 Large gap between elements fading in from both sides and other elements

Screenshot 2 Everything is fixed when I refresh my page

This is a recurring issue in Firefox (Mac / PC), Safari, Chrome (Mac / PC) and IE (10 and below, not tested in IE11, but there is doubt that the problem remains). All browsers are updated (except IE).

Files

( ) , . .

<script src="http://themify.me/demo/themes/parallax/wp-content/themes/parallax/js/skrollr.js?ver=3.6.1"></script>
<script type='text/javascript' src='http://themify.me/demo/themes/parallax/wp-content/themes/parallax/js/themify.script.js?ver=3.6.1'></script>
<script>skrollr.init({mobileCheck: function(){return false;}});</script>

  • init window.load document.ready →
  • jQuery, div →
  • src Theimify →
  • script →
  • → , .
  • {forceHeight: false}

, , , , . , , script , .

div:

<article style="left: 0px; top: 0px; opacity: 1;"
data-bottom-top="left[sqrt]: -400px;top[sqrt]:200px;opacity: 0;"
data-center-top="left[sqrt]:0px;top[sqrt]:0px;opacity:1;"
class="highlight type-highlight post col2-2 skrollable skrollable-after">
    <figure class="post-image">
        <img src="imges/picture1.jpg" />
    </figure>
</article>
<article style="right: 0px; top: 0px; opacity: 1;"
data-bottom-top="right[sqrt]:-200px;top[sqrt]:200px;opacity:0;" 
data-center-top="right[sqrt]:0px;top[sqrt]:0px;opacity: 1;" 
class="highlight type-highlight post col2-2 skrollable skrollable-after">
    <div class="post-content">
        <h2>Heading</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper justo at sollicitudin posuere. Nulla elementum, turpis vel posuere egestas, nisi diam malesuada arcu, eu pulvinar nunc mi vitae odio. Aliquam semper eros nec quam tempor, vitae ultrices turpis posuere. Aliquam mi massa, imperdiet at diam nec, volutpat vulputate dolor. Curabitur condimentum dolor tortor, at laoreet risus condimentum a. Mauris lobortis ut magna nec egestas. Etiam at accumsan est. Donec gravida scelerisque lorem sit amet vestibulum.
        </p>
    </div>
</article>

, , top[sqrt]:200px;; ( 0, /, , ).

+4
2

script :

  • , script , .
  • script top[sqrt]:200px; , 0, / , . , , , .

.

, script, , - , , CSS3, , lazyload - .

+1

, forceHeight: true. , skrollr , . , , , - .

, , , skrollr , JavaScript , .

:

skrollr.get().refresh();
+2

More articles:


All Articles