195 lines
8.6 KiB
HTML
195 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta charset="utf-8">
|
||
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<link href="../../old/assets/style/styles.css" rel="stylesheet" type="text/css">
|
||
<!--[if lt IE 9]>
|
||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
(function() {
|
||
var s, scheme, wf;
|
||
|
||
this.WebFontConfig = {
|
||
google: {
|
||
families: ['Amaranth:700,700italic:latin', 'Inconsolata::latin']
|
||
}
|
||
};
|
||
|
||
wf = document.createElement('script');
|
||
|
||
scheme = 'https:' === document.location.protocol ? 'https' : 'http';
|
||
|
||
wf.src = scheme + "://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";
|
||
|
||
wf.type = 'text/javascript';
|
||
|
||
wf.async = 'true';
|
||
|
||
s = document.getElementsByTagName('script')[0];
|
||
|
||
s.parentNode.insertBefore(wf, s);
|
||
|
||
}).call(this);
|
||
</script>
|
||
|
||
<title>Go back with the mouse wheel in Chrome | eRambler</title>
|
||
<link href="https://erambler.co.uk/rss.xml" rel="alternate" type="application/rss+xml">
|
||
</head>
|
||
<body class="single-post">
|
||
<div id="container">
|
||
<header class="page-header">
|
||
<hgroup>
|
||
<div class="h1"><a href="../../">eRambler</a></div>
|
||
<div class="lead">Jez Cope's blog on becoming a research technologist</div>
|
||
</hgroup>
|
||
<nav><ul>
|
||
<li><a href="../../">Home</a></li>
|
||
<li><a href="../../about/">About</a></li>
|
||
<li><a href="../../blogroll/">Blogroll</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
<section>
|
||
<div class="row">
|
||
<p class="archive-warning"><strong><em>Please note:</em></strong> this older content has been <strong>archived</strong> and is no longer fully linked into the site. Please go to the <a href="../../">current home page</a> for up-to-date content.</p>
|
||
</div>
|
||
<div id="content">
|
||
<article class="h-entry">
|
||
<div class="row">
|
||
<h1 class="post-title p-name">Go back with the mouse wheel in Chrome</h1>
|
||
</div>
|
||
<div class="row">
|
||
<div class="post-info">
|
||
<div class="post-date dt-published">
|
||
<a class="u-url" href="http://erambler.co.uk/blog/chrome-scroll-back/">Wednesday 6 May 2015</a>
|
||
</div>
|
||
Tagged with
|
||
<ul class="post-tags">
|
||
<li class="p-category"><span class="tag">Programming</span></li>
|
||
<li class="p-category"><span class="tag">Chrome</span></li>
|
||
<li class="p-category"><span class="tag">Extension</span></li>
|
||
<li class="p-category"><span class="tag">JavaScript</span></li>
|
||
<li class="p-category"><span class="tag">Open source</span></li>
|
||
<li class="p-category"><span class="tag">Things I made</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="post-body">
|
||
<div class="post-content e-content">
|
||
<p>One of the best ways of getting started developing open source software is to “scratch your own itch”: when you have a problem, get coding and solve it. So it is with this little bit of code.</p>
|
||
|
||
<p>Scroll Back is a very simple Chrome extension that replicates a little-known feature of Firefox: if you hold down the <kbd>Shift</kbd> key and use the mouse wheel, you can go forward and backward in your browser history. The idea came from <a href="https://code.google.com/p/chromium/issues/detail?id=927#c18">issue 927 on the Chromium bug tracker</a>, which is a request for this very feature.</p>
|
||
|
||
<p>You can <a href="https://chrome.google.com/webstore/detail/scroll-back/bhhdgkdmcbgoecgmdgbkabdbjcihafgc?hl=en-GB&gl=GB">install the extension from the Chrome Web Store</a> if you use Chrome (or <a href="http://www.chromium.org/">Chromium</a>).</p>
|
||
|
||
<p>The code is so simple I can reproduce it here in full:</p>
|
||
|
||
<div class="highlighter-rouge">
|
||
<pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">"wheel"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">shiftKey</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">!=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="o">-</span><span class="nb">Math</span><span class="p">.</span><span class="nx">sign</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">));</span>
|
||
<span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||
<span class="p">}</span>
|
||
<span class="p">});</span>
|
||
</code></pre>
|
||
</div>
|
||
|
||
<ul>
|
||
<li>Line 1 adds an event listener which is executed every time the user uses the scroll wheel.</li>
|
||
<li>If the <kbd>Shift</kbd> key is held down and the user has scrolled (line 2), line 3 goes backward or forward in the history according to whether the user scrolled down or up respectively (<code class="highlighter-rouge">e.deltaX</code> is positive for down, negative for up)</li>
|
||
<li>Line 4 prevents any unwanted side-effects of scrolling.</li>
|
||
</ul>
|
||
|
||
<p>The code is automatically executed every time a page is loaded, so has the effect of enabling this behaviour in all pages.</p>
|
||
|
||
<p>It’s open source (licensed under the <a href="LICENSE.txt">MIT License</a>), so you can <a href="https://github.com/jezcope/chrome-scroll-back">check out the full source code on github</a>.</p>
|
||
|
||
</div>
|
||
<div id="disqus_thread"></div>
|
||
<script>
|
||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||
var disqus_shortname = 'erambler'; // required: replace example with your forum shortname
|
||
var disqus_identifier = 'tag:erambler.co.uk,2015-05-06:/blog/chrome-scroll-back/';
|
||
var disqus_title = 'Go back with the mouse wheel in Chrome'
|
||
var disqus_url = 'http://erambler.co.uk/blog/chrome-scroll-back/';
|
||
var disqus_developer = 0;
|
||
if (window.location.hostname == 'localhost')
|
||
disqus_developer = 1;
|
||
|
||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||
(function() {
|
||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
|
||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||
})();
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div id="sidebar">
|
||
<div class="sidebar-box about-me h-card">
|
||
<p>Hi, I’m <a href="http://erambler.co.uk" class="p-name u-url">Jez Cope</a> and this is my
|
||
blog, where I talk about technology in research and higher
|
||
education, including:</p>
|
||
|
||
<ul>
|
||
<li>Research data management;</li>
|
||
<li>e-Research;</li>
|
||
<li>Learning;</li>
|
||
<li>Teaching;</li>
|
||
<li>Educational technology.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="sidebar-box links">
|
||
<h2>Me elsewhere</h2>
|
||
<ul>
|
||
<li><a href="https://twitter.com/jezcope" rel="me">Twitter</a></li>
|
||
<li><a href="https://github.com/jezcope" rel="me">github</a></li>
|
||
<li><a href="https://linkedin.com/in/jezcope">LinkedIn</a></li>
|
||
<li><a href="http://diigo.com/user/jezcope">Diigo</a></li>
|
||
<li><a href="https://www.zotero.org/jezcope">Zotero</a></li>
|
||
<li><a href="http://gplus.to/jezcope">Google+</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<footer><a class="license" href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">
|
||
<img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/4.0/88x31.png" style="border-width:0">
|
||
</a>
|
||
<span href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type" xmlns:dct="http://purl.org/dc/terms/">
|
||
eRambler
|
||
</span>
|
||
by
|
||
<a href="http://erambler.co.uk/" property="cc:attributionName" rel="cc:attributionURL" xmlns:cc="http://creativecommons.org/ns#">
|
||
Jez Cope
|
||
</a>
|
||
is licensed under a
|
||
<a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">
|
||
Creative Commons Attribution-ShareAlike 4.0 International license
|
||
</a>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<script>
|
||
if (!/^http:\/\/localhost/.test(window.location)) {
|
||
var _gaq = _gaq || [];
|
||
_gaq.push(['_setAccount', 'UA-10201101-1']);
|
||
_gaq.push(['_trackPageview']);
|
||
|
||
(function() {
|
||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||
})();
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|