All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()
| var EventSystem = (function() { | |
| var self = this; | |
| self.queue = {}; | |
| return { | |
| publish: function (event, data) { | |
| var queue = self.queue[event]; | |
| if (typeof queue === 'undefined') { |
Useful for when a blocking user experience is needed (in my case, didn't want people unwittingly loosing their place by scrolling while a modal required their attention): $.scrollLock() locks the body in place, preventing scroll until it is unlocked.
// Locks the page if it's currently unlocked
$.scrollLock();
// ...or vice versa
Attention: the list was moved to
https://github.com/dypsilon/frontend-dev-bookmarks
This page is not maintained anymore, please update your bookmarks.
| ko.bindingHandlers.scroll = { | |
| updating: true, | |
| init: function(element, valueAccessor, allBindingsAccessor) { | |
| var self = this | |
| self.updating = true; | |
| ko.utils.domNodeDisposal.addDisposeCallback(element, function() { | |
| $(window).off("scroll.ko.scrollHandler") | |
| self.updating = false |