All geek questions in one place

Disable page scrolling

Does anyone know how to prevent the page from switching to input when it has changed? In particular, if it has changed using the shortcut button from another place on the page.

This issue affects IE, Chrome Canary, FireFox, and possibly some others, in fact the only browser that it does not seem to be affected is Chrome v28.

Here you can see the problem: http://jsfiddle.net/FgaWM/3/

This will usually be a useful feature, but in my case it is quite annoying, I need a way to prevent / override it.

I tried to force the scroll position using jQuery:

var labelPos = $(window).scrollTop(); $(window).scrollTop(labelPos);

This solution ... is at best buggy, causing an instant page flicker.

Does anyone have a better way?

Edit: I understood the solution: P

 $('label').click(function(e) { e.preventDefault(); var For = $(this).attr('for'); $('#' + For).trigger('click'); });
+6
source share
2 answers
 $('label[for]').on('click', function (e) { var target = window[this.htmlFor]; target.checked = !target.checked; e.preventDefault(); });
+6
source

In case this helps someone else ... I used the "checkbox hack" with both checkboxes and radio stations (so the accepted answer didn’t work for me) and my layout kept jumping.

This is what worked for me https://codepen.io/allicarn/pen/MOgbpg

In the shortcut’s multi-down, I move the hidden (and “non-local”) entrance to the same upper position as the label, so when the browser naturally scrolls, it does not need to go anywhere.

Passed here, for posterity:

 (function() { $('label[for]').filter(function() { var $input = $(window[this.htmlFor]); // Collect the labels whos inputs are offscreen and don't align to them return ($input.offset().left < 0) && ($input.offset().top != $(this).offset().top); }).on('mousedown.init', function() { // Move the input so that it is aligned with the label, to prevent scrolling $(window[this.htmlFor]).css({ 'position': 'fixed', 'top': $(this).offset().top }); }); })(); 
 * { box-sizing: border-box; } .container { width: 60%; max-width: 500px; margin: 0 auto; padding: 20px; border: 3px solid black; } .container p:first-child { margin-top: 0; } input[type="checkbox"], input[type="radio"] { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } input[type="checkbox"][id], input[type="radio"][id] { margin: 0; } label[for] { display: inline-block; cursor: pointer; border: 1px solid; padding: 10px; box-shadow: 1px 1px 2px; } label[for]:hover { box-shadow: 1px 1px 4px; } .label-group { display: flex; width: 100%; margin: 20px 0 0; } .label-group label[for] { box-shadow: none; border-left-width: 0; } .label-group label[for]:first-child { border-left-width: 1px; } .label-group label[for]:hover { box-shadow: 1px 1px 4px; } .border-control:checked ~ .container { border-color: red; } .border-control:checked ~ .container .border-control__label { background: #ccc; } .font-control--red:checked ~ .container { color: red; } .font-control--red:checked ~ .container .font-control--red__label { background: #ccc; } .font-control--blue:checked ~ .container { color: blue; } .font-control--blue:checked ~ .container .font-control--blue__label { background: #ccc; } .font-control--default:checked ~ .container .font-control--default__label { background: #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="hidden1" class="border-control" /> <input type="radio" id="hiddenrad1" name="radioDemo" class="font-control--red" /> <input type="radio" id="hiddenrad2" name="radioDemo" class="font-control--blue" /> <input type="radio" id="hiddenrad3" name="radioDemo" class="font-control--default" checked /> <div class="container"> <!-- Extra stuff to make it scroll --> <div> <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p> <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p> <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p> <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p> <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p> <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p> <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p> <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p> <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p> <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p> <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p> <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p> <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p> <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p> <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p> <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p> <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p> <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p> <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p> <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p> <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p> </div> <!-- These labels control inputs all the way at the top of the pen --> <label for="hidden1" class="border-control__label">Change border color</label> <div class="label-group"> <label for="hiddenrad1" class="font-control--red__label">Change font to red</label> <label for="hiddenrad2" class="font-control--blue__label">Change font to blue</label> <label for="hiddenrad3" class="font-control--default__label">Change font to default</label> </div> </div>
+1
source

Source: https://habr.com/ru/post/949845/

More articles:


All Articles