{"id":380,"date":"2009-07-31T15:45:47","date_gmt":"2009-07-31T20:45:47","guid":{"rendered":"http:\/\/eligrey.com\/blog\/?p=380"},"modified":"2024-10-15T18:41:49","modified_gmt":"2024-10-16T01:41:49","slug":"retargetmousescroll","status":"publish","type":"post","link":"https:\/\/eligrey.com\/blog\/retargetmousescroll\/","title":{"rendered":"RetargetMouseScroll"},"content":{"rendered":"<p>Yesterday I made a simple JavaScript micro-library named <a href=\"http:\/\/github.com\/eligrey\/RetargetMouseScroll\/tree\/master\">RetargetMouseScroll<\/a> that provides a simple API to retarget\/redirect mouse scroll events. I named it this because <q>RedirectMouseScroll<\/q> sounded weird. At first glance it seems pretty useless but there are some cool things you can do with the library which are listed in the <a href=\"#examples\">examples section<\/a> of this post.<\/p>\n<h2>Demo<\/h2>\n<p>The <a title=\"RetargetMouseScroll Test Suite\" href=\"https:\/\/code.eligrey.com\/tests\/libs\/RetargetMouseScroll\/test-suite\/index.html\">test suite<\/a> functions as a great demo.<\/p>\n<h2>Usage<\/h2>\n<pre lang=\"actionscript\">RetargetMouseScroll(\n    element         :Node,    \/\/ default: document\n    targetWindow    :Window,  \/\/ default: window\n    preventDefault  :Boolean, \/\/ default: true\n    scrollMultiplier:Number   \/\/ default: 1.0\n)<\/pre>\n<p><code>RetargetMouseScroll<\/code> returns an object containing a <code>restore<\/code> method. Calling the method restores the default scrolling.<\/p>\n<h2 id=\"examples\">Examples<\/h2>\n<ul>\n<li><code>RetargetMouseScroll(myElement, myFrame)<\/code> &#8211; Per-element mouse scroll retargetting to a frame<\/li>\n<li><code>RetargetMouseScroll(document, window, true, 0.5)<\/code> &#8211; Slow down scrolling<\/li>\n<li><code>RetargetMouseScroll(document, window, true, -1)<\/code> &#8211; Invert scrolling<\/li>\n<li><code>RetargetMouseScroll(document, window, true, 2)<\/code> &#8211; Speed up scrolling<\/li>\n<\/ul>\n<p>More advanced example using a popup:<\/p>\n<pre lang=\"javascript\">var win = window.open(\"\/\", \"example\", \"w=\" + (screen.availWidth \/ 3.5)\n                                      + \",h=\" + (screen.availHeight \/ 3.5)\n                                      + \",scrollbars=yes,resize=yes\");\nwin.addEventListener(\"DOMContentLoaded\", function() {\n    var retargetting = RetargetMouseScroll(document, win);\n    win.onunload = function () {\n        retargetting.restore();\n    };\n}, false);<\/pre>\n<p>In the previous example, all mouse scrolling on the main document is retargetted to the popup until it is closed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday I made a simple JavaScript micro-library named RetargetMouseScroll that provides a simple API to retarget\/redirect mouse scroll events. I named it this because RedirectMouseScroll sounded weird. At first glance it seems pretty useless but there are some cool things you can do with the library which are listed in the examples section of this [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[91,138],"class_list":["post-380","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-javascript-libraries","tag-retargetmousescroll"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pfpUD-68","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":0,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"wp:attachment":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}