1

Tengo este código de jQuery:

(function($) {
    $.fn.extend({
        WETotalScroll: function(opts) {
            var object          = $(this);                  
            var position        = "top";                    
            var domHeight       = 0;                        
            var windowHeight    = $(window).outerHeight();  
            if(opts) {
                position = opts.position;
            }

            /* The dom is ready */
            $(document).ready(function() {
                domHeight = $(this).outerHeight() - windowHeight;
                object.addClass(position);
                var totalScrollContainer = '<div class="scrolled"></div>';
                object.append(totalScrollContainer);
            });

            /* The window gets resized or scrolls */
            $(window).on("resize scroll touchmove", function() {
                windowHeight = $(window).outerHeight();
                domHeight = $(document).outerHeight() - windowHeight;
                calculateHeight();
            });

            function calculateHeight() {
                var scroll = $(window).scrollTop();
                if( scroll >= domHeight ) {
                    changeScrollFill($(".scrolled"), 100);
                }
                else if( scroll <= 0 ) {
                    changeScrollFill($(".scrolled"), 0);
                }
                else {
                    var calc = (scroll*100)/(domHeight);
                    changeScrollFill($(".scrolled"), calc);
                }
            }
            function changeScrollFill(obj, percent) {
                if(position == "top" || position == "bottom") {
                    $(obj).css({
                        "width": percent+"%"
                    });
                }
                else {
                    $(obj).css({
                        "height": percent+"%"
                    });
                }
            }
        }
    })
})(jQuery);

El plug-in básicamente muestra una barra que crece y decrece dependiendo en cuanto hayas hecho scroll en la página.

En local con dispositivos (android y iPhone) funciona bien, cuando llega al final de la página la barra está llena. Cuando la barra de direcciones desaparece éste recalcula la altura de la ventana correctamente. Pero cuando está en el servidor (ya en vivo) siempre deja un hueco vacío, ya que no recalcula la altura de la barra de dirección desaparece impidiendo así que ésta se llene.

Debajo dejo el código snippet, por si lo queréis probar. Como dije, esto en local tanto con dispositivos android como iOS funciona bien, pero es cuando lo subo a producción cuando no lo hace.

(function($) {
    $.fn.extend({
        WETotalScroll: function(opts) {
            var object          = $(this);                  //The object where to attach
            var position        = "top";                    //Position of the bar
            var domHeight       = 0;                        //Document height 
            var windowHeight    = $(window).outerHeight();  //Window Viewport height
            if(opts) {
                position = opts.position;
            }
            
            /* The dom is ready */
            $(document).ready(function() {
                domHeight = $(this).outerHeight() - windowHeight;
                object.addClass(position);
                var totalScrollContainer = '<div class="scrolled"></div>';
                object.append(totalScrollContainer);
            });
            
            /* The window gets resized or scrolls */
            $(window).on("resize scroll touchmove", function() {
                windowHeight = $(window).outerHeight();
                domHeight = $(document).outerHeight() - windowHeight;
                calculateHeight();
            });
            
            function calculateHeight() {
                var scroll = $(window).scrollTop();
                if( scroll >= domHeight ) {
                    changeScrollFill($(".scrolled"), 100);
                }
                else if( scroll <= 0 ) {
                    changeScrollFill($(".scrolled"), 0);
                }
                else {
                    var calc = (scroll*100)/(domHeight);
                    changeScrollFill($(".scrolled"), calc);
                }
            }
            function changeScrollFill(obj, percent) {
                if(position == "top" || position == "bottom") {
                    $(obj).css({
                        "width": percent+"%"
                    });
                }
                else {
                    $(obj).css({
                        "height": percent+"%"
                    });
                }
            }
        }
    })
})(jQuery);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  padding-top: 10px;
}
body .container {
  max-width: 1280px;
  margin: auto;
  border: 1px solid #000;
  padding: 20px;
}
body .total-scroll-container {
  position: fixed;
  background-color: #fff;
  z-index: 100;
}
body .total-scroll-container.top {
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
}
body .total-scroll-container.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
}
body .total-scroll-container.left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px;
}
body .total-scroll-container.right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
}
body .total-scroll-container.top .scrolled,
body .total-scroll-container.bottom .scrolled {
  height: 100%;
  width: 0;
}
body .total-scroll-container.left .scrolled,
body .total-scroll-container.right .scrolled {
  width: 100%;
  height: 0;
}
body .scrolled {
  position: absolute;
  background-color: greenyellow;
}
h1 {
                margin-bottom: 15px;
            }
            p {
                margin-bottom: 15px;
            }
            p:last-child {
                margin-bottom: 0;
            }
            p img {
                width: 100%;
                display: block;
            }
.zoo {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
            <div class="total-scroll-container"></div>
            <h1>Scrolling indicator</h1>
            <p>Sometimes, you want to let know the user how far from the end of the article of the page the user is.</p>
            <p class="zoo"></p>
            <p>For those cases, we did our own code to show the user the percetage of the whole page "read" in real time.</p>
            <p>If you keep scrolling through this page, you can see a greeny bar growing and shrinking depending on if you are scrolling down or up. It's all dynamic. It doesn't matter if the page grows because you made the window bigger or smaller, it always calculates the percentage scrolled and it will make the bar bigger or smaller.</p>
            <p class="zoo"></p>
        </div>
        <script>
            $(document).ready(function() {
                $(".total-scroll-container").WETotalScroll({
                    "position": "top"
                });
            });
        </script>

9
  • A qué te refieres con "en local" en este caso? ¿Cuando sirves la página desde tu PC? el 10 oct. 2017 a las 14:56
  • @PabloLozano exacto
    – Zander
    el 10 oct. 2017 a las 15:08
  • El javascript que se ejecuta en el navegador de tu móvil no va a distinguir desde donde se sirve, quizá "en vivo" (en producción?) se está añadiendo algo que hace que se comporte distinto. Prueba a usar Chrome en modo emulación a ver en qué varía el comportamiento en un servidor y otro el 10 oct. 2017 a las 15:11
  • @PabloLozano si lo emulo con Chrome como si fuera un dispositivo, este no añade la barra de navegación, y hace que se ejecute correctamente. Es que me extraña muchísimo que en localhost funcione correctamente (incluso se ve como se hace la barra más pequeña al tener más altura) y el mismo código en producción no funcione. Si quieres visualizarlo, puedes hacerlo en webelements.esy.es/totalScroll.html
    – Zander
    el 10 oct. 2017 a las 15:18
  • Te refieres a la barra verde? que se llena al llegar al final ?? yo si la veo :)
    – elporfirio
    el 11 oct. 2017 a las 1:22

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.