bencentra / jq-signature

jQuery plugin for creating touch-friendly signature fields using the HTML5 canvas
http://bencentra.github.io/jq-signature/
MIT License
47 stars 28 forks source link

Scroll bar disappears when signing the canvas #15

Open woodsbox opened 3 years ago

woodsbox commented 3 years ago

Great library love to work with it! Only when signing the canvas with my mouse the scroll bar on the right side disappears. It returns when releasing the mouse button. This is causing the whole page to move a bit when pressing the mouse button because of the extra space.

techdaddies-kevin commented 3 years ago

We ran into this issue as well @woodsbox . We just edited the JS to remove the calls that set the overflow property on the body (There are two. One to set it to auto, and one to set it to hidden)

AtmanActive commented 8 months ago

Or even this:

function jqsgntr_disableTouchScroll( event )
{
    // event.preventDefault(); // https://chromestatus.com/feature/5093566007214080
    event.stopPropagation();
    return false;
}

function jqsgntr_disableScroll() 
{
    document.querySelector( 'body' ).addEventListener( 'touchmove', jqsgntr_disableTouchScroll );
}
function jqsgntr_enableScroll() 
{
    document.querySelector( 'body' ).removeEventListener( 'touchmove', jqsgntr_disableTouchScroll);
}

where we disable only the touchscroll events to avoid page scrollbars flashing in and out:

then, on line 125:

        // Handle the start of a signature
        _downHandler: function (e) {
            this.drawing = true;
            this.lastPos = this.currentPos = this._getPosition(e);
            // Prevent scrolling, etc
            jqsgntr_disableScroll();
            // $('body').css('overflow', 'hidden'); // this is a hack to prevent the page from scrolling on touch devices but the scrollbars are then flashing in and out
            e.preventDefault();
        },

and on line 141:

        // Handle the end of a signature
        _upHandler: function (e) {
            this.drawing = false;
            // Trigger a change event
            var changedEvent = $.Event('jq.signature.changed');
            this.$element.trigger(changedEvent);
            // Allow scrolling again
            jqsgntr_enableScroll();
            // $('body').css('overflow', 'auto'); // this is a hack to prevent the page from scrolling on touch devices but the scrollbars are then flashing in and out
            e.preventDefault();
        },