{"id":7840,"date":"2015-10-26T16:15:06","date_gmt":"2015-10-26T14:15:06","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7840"},"modified":"2017-12-21T15:50:38","modified_gmt":"2017-12-21T13:50:38","slug":"jquery-mousewheel-plugin-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/","title":{"rendered":"jQuery Mousewheel Plugin Example"},"content":{"rendered":"

The aim of this example is to use the Mousewheel Plugin, a jQuery plugin that adds cross-browser mouse wheel support with delta normalization.<\/p>\n

Mouse Wheel is a lightweight plugin that has been used for many years in a wide variety of jQuery plugins, websites and web applications. In order to use the plugin, simply bind the mousewheel<\/code> event to an element.<\/p>\n

It also provides two helper methods called mousewheel<\/code> and unmousewheel<\/code> that act just like other event helper methods in jQuery. jQuery regularly adopts new plugins to enrich the library with new support and functionality features.<\/p>\n

You can easily find all jQuery plugins in their official GitHub repository following this link<\/a>.
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Basics<\/h2>\n

The following setup is required to be able to use the plugin.<\/p>\n

1.1 Document Setup<\/h3>\n

To begin, create a new HTML document and add the following basic syntax in it like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery Mousewheel Example<\/title>\r\n<\/head>\r\n<body>\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script src=\"jquery-1.11.3.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\"jquery.mousewheel.min.js\"<\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Note that both the jQuery plugin and Mousewheel are sourced locally.<\/p>\n
1.2 The Test Example<\/h3>\n
The following example is the one found on the plugin .zip<\/code> and it shows a use case of mousewheel.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div id=\"emulated\"><\/div>\r\n<div id=\"native\"><\/div>\r\n<\/pre>\n
The style should be a bit customized for things to work on this specific case, so there would be:<\/p>\n
\r\n<style type=\"text\/css\">\r\nhtml, body { margin: 0; padding: 0; width: 100%; height: 100%; }\r\n#emulated, #native {\r\n    width: 40%;\r\n    height: 100%;\r\n}\r\n#emulated { \r\n  float: left; \r\n  overflow: hidden; \r\n}\r\n\r\n#native { \r\n  float: right; \r\n  overflow: auto; \r\n}\r\n<\/style>\r\n<\/pre>\n
Notice the two div’s are empty, that is because content is coming from javascript and then appended. Then, the mousewheel<\/code> is applied.<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n  var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus nibh ac ultricies blandit. Nunc blandit blandit lobortis. Maecenas id dolor scelerisque, facilisis dolor eu, interdum urna. Nullam consectetur lectus quis mi interdum accumsan. Nulla malesuada est nec neque suscipit pulvinar. Vivamus sagittis, nunc a porttitor tempus, mi neque eleifend diam, nec porttitor metus dui a orci. Cras tempus lobortis nisl ut sagittis. Maecenas semper in magna mollis venenatis. Vestibulum fermentum tincidunt fringilla.';\r\n  $(function() {\r\n    for (var i=0; i>30; i++) {\r\n      var html = '>p>' + i + ' ' + lorem + '>\/p>';\r\n      $('#emulated').append(html);\r\n      $('#native').append(html);\r\n    }\r\n    $('#emulated').bind('mousewheel', function(event) {\r\n      event.preventDefault();\r\n      var scrollTop = this.scrollTop;\r\n      this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));\r\n      \/\/console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
The result would show two text columns that can be independently be scrolled top-bottom or vice-versa.
\n\"mousewheel1\"<\/a><\/p>\n
1.3 About “The Deltas”<\/h3>\n
The combination of Browsers, Operating Systems, and Devices offer a huge range of possible delta values. In fact if the user uses a trackpad and then a physical mouse wheel the delta values can differ wildly. This plugin normalizes those values so you get a whole number starting at +-1 and going up in increments of +-1 according to the force or acceleration that is used. This number has the potential to be in the thousands depending on the device. <\/p>\n
Getting the Scroll Distance<\/strong>
\nIn some use-cases we prefer to have the normalized delta but in others we want to know how far the browser should scroll based on the users input. This can be done by multiplying the deltaFactor by the deltaX<\/code> or deltaY<\/code> event property to find the scroll distance the browser reported.<\/p>\n
3. Testing the Event Trigger<\/h2>\n
In this section, let’s create a few lines of text in HTML and tell the plugin to fire an alert on mousewheel over the div.<\/p>\n
\r\n<div>\r\n    <h3>I am a title<\/h3>\r\n    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\n    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <\/p>\r\n<\/div>\r\n<\/pre>\n
As soon as scroll is detected on our div section, the alert will show up.<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n   $(\"body\").mousewheel(function(event, delta) {\r\n      alert(\"Mousewheel Detected\");\r\n      this.scroll -= (delta * 20);\r\n      event.preventDefault();\r\n   });\r\n});\r\n<\/script>\r\n<\/pre>\n
\"mousewheel3\"<\/a><\/p>\n
3. Owl Plugins – Alternative Mousewheel<\/h3>\n
There are also modified alternatives to the jQuery Mousewheel Plugin, that rely on it, however. One of those is the Owl Carousel library which also has a method for mousewheel on both vertical and horizontal content, and it basically that looks like this:
\n\"mousewheel2\"<\/a>
\nYou can find a more detailed information on the Owl Carousel official website: Owl Carousel Mousewheel<\/a><\/p>\n
4. Conclusion<\/h2>\n
To conclude, the Mousewheel jQuery Plugin is updated regularly to ensure modern browser compatibility and offer seamless interaction with the mousewheel. The event is triggered by either .mousewheel(...)<\/code> or on(\"mousewheel\", ...);<\/code> and you can expand functionality with several options using object referencing to define what you are affecting and how to achieve specific scroll effects.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery Mousewheel<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to use the Mousewheel Plugin, a jQuery plugin that adds cross-browser mouse wheel support with delta normalization. Mouse Wheel is a lightweight plugin that has been used for many years in a wide variety of jQuery plugins, websites and web applications. In order to use the plugin, simply bind …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery Mousewheel Plugin Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to use the Mousewheel Plugin, a jQuery plugin that adds cross-browser mouse wheel support with delta normalization. Mouse Wheel\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Mousewheel Plugin Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to use the Mousewheel Plugin, a jQuery plugin that adds cross-browser mouse wheel support with delta normalization. Mouse Wheel\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-26T14:15:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T13:50:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery Mousewheel Plugin Example\",\"datePublished\":\"2015-10-26T14:15:06+00:00\",\"dateModified\":\"2017-12-21T13:50:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/\"},\"wordCount\":550,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/\",\"name\":\"jQuery Mousewheel Plugin Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-10-26T14:15:06+00:00\",\"dateModified\":\"2017-12-21T13:50:38+00:00\",\"description\":\"The aim of this example is to use the Mousewheel Plugin, a jQuery plugin that adds cross-browser mouse wheel support with delta normalization. Mouse Wheel\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Mousewheel Plugin Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Mousewheel Plugin Example - Web Code Geeks - 2026","description":"The aim of this example is to use the Mousewheel Plugin, a jQuery plugin that adds cross-browser mouse wheel support with delta normalization. Mouse Wheel","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Mousewheel Plugin Example - Web Code Geeks - 2026","og_description":"The aim of this example is to use the Mousewheel Plugin, a jQuery plugin that adds cross-browser mouse wheel support with delta normalization. Mouse Wheel","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-10-26T14:15:06+00:00","article_modified_time":"2017-12-21T13:50:38+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery Mousewheel Plugin Example","datePublished":"2015-10-26T14:15:06+00:00","dateModified":"2017-12-21T13:50:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/"},"wordCount":550,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/","name":"jQuery Mousewheel Plugin Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-10-26T14:15:06+00:00","dateModified":"2017-12-21T13:50:38+00:00","description":"The aim of this example is to use the Mousewheel Plugin, a jQuery plugin that adds cross-browser mouse wheel support with delta normalization. Mouse Wheel","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mousewheel-plugin-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Mousewheel Plugin Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=7840"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7840\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=7840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=7840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=7840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}