Last active
February 20, 2016 11:02
-
-
Save tsauerwein/38dc9e71a6781da42017 to your computer and use it in GitHub Desktop.
Smart mouse-wheel scrolling for OpenLayers 3 maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> | |
| <link rel="stylesheet" href="http://openlayers.org/en/v3.13.1/css/ol.css" type="text/css"> | |
| <style> | |
| .content { | |
| width: 500px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .map { | |
| width: 500px; | |
| height: 200px; | |
| } | |
| </style> | |
| <title>Smart Scroll</title> | |
| </head> | |
| <body> | |
| <div class="content"> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula. | |
| Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies | |
| ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus | |
| felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus. | |
| In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed | |
| sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare. | |
| Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus, | |
| bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet | |
| justo tristique porttitor ac vel elit. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula. | |
| Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies | |
| ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus | |
| felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus. | |
| In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed | |
| sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare. | |
| Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus, | |
| bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet | |
| justo tristique porttitor ac vel elit. | |
| </p> | |
| <div id="map" class="map"></div> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula. | |
| Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies | |
| ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus | |
| felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus. | |
| In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed | |
| sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare. | |
| Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus, | |
| bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet | |
| justo tristique porttitor ac vel elit. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula. | |
| Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies | |
| ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus | |
| felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus. | |
| In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed | |
| sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare. | |
| Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus, | |
| bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet | |
| justo tristique porttitor ac vel elit. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula. | |
| Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies | |
| ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus | |
| felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus. | |
| In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed | |
| sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare. | |
| Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus, | |
| bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet | |
| justo tristique porttitor ac vel elit. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula. | |
| Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies | |
| ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus | |
| felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus. | |
| In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed | |
| sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare. | |
| Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus, | |
| bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet | |
| justo tristique porttitor ac vel elit. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula. | |
| Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies | |
| ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus | |
| felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus. | |
| In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed | |
| sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare. | |
| Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus, | |
| bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet | |
| justo tristique porttitor ac vel elit. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in fermentum ligula. | |
| Curabitur lobortis, lectus et tempus sagittis, lectus ante facilisis lectus, at ultricies | |
| ante sapien eget nunc. Vestibulum a ex vel risus egestas lobortis vel ut erat. Phasellus | |
| felis risus, vehicula eget leo sed, dignissim facilisis risus. Fusce vel euismod lectus. | |
| In et tristique justo. Praesent auctor rutrum enim eget ornare. Ut id libero mauris. Sed | |
| sed tristique dolor, at dignissim justo. Donec tristique vel elit commodo ornare. | |
| Quisque posuere orci eu nulla consequat, vitae egestas turpis semper. Praesent turpis purus, | |
| bibendum porttitor ante convallis, malesuada tristique justo. Praesent vitae purus sit amet | |
| justo tristique porttitor ac vel elit. | |
| </p> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="http://www.ssorallen.com/jquery-scrollstop/jquery.scrollstop.min.js"></script> | |
| <script src="http://openlayers.org/en/v3.13.1/build/ol.js"></script> | |
| <script src="scroll.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var map = new ol.Map({ | |
| layers: [ | |
| new ol.layer.Tile({ | |
| source: new ol.source.OSM() | |
| }) | |
| ], | |
| target: 'map', | |
| view: new ol.View({ | |
| center: [0, 0], | |
| zoom: 2 | |
| }), | |
| interactions: ol.interaction.defaults({mouseWheelZoom: false}) | |
| }); | |
| var mouseWheelZoomInteraction = new ol.interaction.MouseWheelZoom(); | |
| mouseWheelZoomInteraction.setActive(false); | |
| map.addInteraction(mouseWheelZoomInteraction); | |
| var inMap = false; | |
| var scrolling = false; | |
| $('#map').hover(function(e) { | |
| inMap = true; | |
| if (!scrolling) { | |
| mouseWheelZoomInteraction.setActive(true); | |
| } | |
| }, function(e) { | |
| inMap = false; | |
| }); | |
| $(document).on('scrollstart', function(e) { | |
| scrolling = true; | |
| if (!inMap) { | |
| mouseWheelZoomInteraction.setActive(false); | |
| } | |
| }); | |
| $(document).on('scrollstop', {latency: 500}, function(e) { | |
| scrolling = false; | |
| if (inMap) { | |
| mouseWheelZoomInteraction.setActive(true); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment