I am having this bug when I try to use the form text fields, in cellphone view we are

Hello. I modificated your . I added correct scroll for Android and only for acti

BUG IN CELLPHONE VIEW - FORM FIELDS about scrollify HOT 2 OPEN

franciscocasas commented on June 19, 2024

BUG IN CELLPHONE VIEW - FORM FIELDS

from scrollify.

Comments (2)

franciscocasas commented on June 19, 2024 1

I could fix the error, it was a bug made of a mix of scrollify and chrome. If someone finds this error, I solve it with the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js" integrity="sha512-0+SppYGxjfZ+5clBrJbcVIC/984AGub2ahawvvjG+DoaJEWnO7ReppZdthk7HmF/jaiI8gVtpfNM5HgXp16Mgw==" crossorigin="anonymous"></script>

 <script>
if (window.matchMedia("(max-width: 476px)").matches) {
  /* The viewport is less than, or equal to, 476 pixels wide */
$(function() {
          $.scrollify({
            section : ".scroll",
             standardScrollElements: ".form",
              scrollbars: true,
              setHeights: true,
              overflowScroll: true,
              updateHash: true,
              touchScroll: true,
          });
        });
} else {
  /* The viewport is greater than 476 pixels wide */
  console.log = 'Nada'
}
</script>
<script>
$(window).resize(function() {
    var $htmlOrBody = $('html, body'), // scrollTop works on <body> for some browsers, <html> for others
    scrollTopPadding = 8;
    // get input tag's offset top position
    var textareaTop = $(this).offset().top;
    // scroll to the textarea
    $htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

    // OR  To add animation for smooth scrolling, use this. 
    //$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, 200);
});
</script>

from scrollify.

zhirniy commented on June 19, 2024

Hello. I modificated your script. I added correct scroll for Android and only for active input.
$(window).resize(function() {
var $htmlOrBody = $('html, body'), // scrollTop works on for some browsers, for others
scrollTopPadding = 8;
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;

if(isAndroid){
    var emailEl = document.getElementById('email');
    var nameEl = document.getElementById('name');
    var mesEl = document.getElementById('message');
    var isFocused = (document.activeElement === emailEl) || (document.activeElement === mesEl) || (document.activeElement === nameEl);
    if(isFocused){
        var textareaTop = $(this).offset();
        $htmlOrBody.scrollTop(textareaTop - scrollTopPadding);
    }
}

// });
// get input tag's offset top position
// var textareaTop = $(this).offset().top;

// scroll to the textarea
// $htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

// OR  To add animation for smooth scrolling, use this.
//$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, 200);

});

from scrollify.

Recommend Projects