{"id":9376,"date":"2024-01-10T18:02:00","date_gmt":"2024-01-10T18:02:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9376"},"modified":"2024-01-22T16:03:27","modified_gmt":"2024-01-22T11:03:27","slug":"javascript-smooth-scroll-on-mouse-wheel","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/","title":{"rendered":"JavaScript Smooth Scroll on Mouse Wheel"},"content":{"rendered":"

Smooth scrolling on mouse wheel interactions can greatly improve the user experience of your website. This JavaScript code enables smooth scrolling on mouse wheel interactions. It works by adjusting the scroll position of a webpage in a fluid manner, creating a visually pleasing scrolling effect. This code is helpful for enhancing user experience by providing a smoother and more controlled scrolling behavior on your website.<\/p>\n

How to Create Smooth Scroll On Mouse Wheel Using JavaScript<\/h2>\n

1. Start by creating the HTML structure for your webpage. Ensure you have a container element where you want the smooth scrolling effect to take place. You can give it an id<\/code> for easy reference in your JavaScript code. For this guide, we’ll use “scroll-container.”<\/p>\n

<section class=\"viewport\">\r\n    \r\n  <div id=\"scroll-container\" class=\"scroll-container\">\r\n    <div class=\"content\">\r\n  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-10.jpg\" alt=\"\">\r\n      <\/div>       \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-14.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-15.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-16.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <!--  REPEAT  -->\r\n\r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-10.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-14.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-15.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-16.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <!--  REPEAT  -->\r\n\r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-10.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-14.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-15.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <div class=\"img-container\">\r\n        <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/106114\/splash-16.jpg\" alt=\"\">\r\n      <\/div>  \r\n      <!--  REPEAT  -->  \r\n\r\n    <\/div>\r\n  <\/div>\r\n   \r\n<\/section>\r\n<\/pre>\n
2. In your CSS, define the necessary styles to support the smooth scrolling effect. The CSS code should include styles for the container and any other relevant elements on your webpage. Here’s a sample CSS code snippet:<\/p>\n
*, :after, :before {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  overflow-x: hidden;\r\n  overflow-y: scroll;\r\n}\r\n\r\n.viewport {\r\n  overflow: hidden;\r\n  position: fixed;\r\n  height: 100%;\r\n  width: 100%;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n}\r\n\r\n.scroll-container {\r\n  position: absolute;\r\n  overflow: hidden;\r\n  z-index: 10;\r\n  display: flex;\r\n  justify-content: center;\r\n  -webkit-backface-visibility: hidden;\r\n          backface-visibility: hidden;\r\n  transform-style: preserve-3d;\r\n}\r\n\r\n.content {\r\n  width: 60%;\r\n  padding-top: 50px;\r\n}\r\n\r\n.img-container {\r\n  margin: 0 0 50px;\r\n}\r\n.img-container img {\r\n  max-width: 100%;\r\n  width: 100%;\r\n  height: auto;\r\n}<\/pre>\n
3. Load the TweenMax JS<\/a> by adding the following CDN link just before closing the <body><\/code> tag:<\/p>\n
<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.20.2\/TweenMax.min.js'><\/script><\/pre>\n
4. Finally, it’s time to implement the JavaScript code that enables the smooth scrolling on mouse wheel interactions. Copy and paste the following JavaScript code into your project. Here’s a brief explanation of the core functions:<\/p>\n
    \n
  • The scroller<\/code> object controls the scrolling behavior, including speed and ease settings.<\/li>\n
  • The onLoad<\/code> function initializes the scrolling functionality when the page loads.<\/li>\n
  • The updateScroller<\/code> function smoothly updates the scroll position.<\/li>\n
  • The onScroll<\/code> and onResize<\/code> functions handle scroll and resize events.<\/li>\n<\/ul>\n
    var html = document.documentElement;\r\nvar body = document.body;\r\n\r\nvar scroller = {\r\n  target: document.querySelector(\"#scroll-container\"),\r\n  ease: 0.05, \/\/ <= scroll speed\r\n  endY: 0,\r\n  y: 0,\r\n  resizeRequest: 1,\r\n  scrollRequest: 0,\r\n};\r\n\r\nvar requestId = null;\r\n\r\nTweenLite.set(scroller.target, {\r\n  rotation: 0.01,\r\n  force3D: true\r\n});\r\n\r\nwindow.addEventListener(\"load\", onLoad);\r\n\r\nfunction onLoad() {    \r\n  updateScroller();  \r\n  window.focus();\r\n  window.addEventListener(\"resize\", onResize);\r\n  document.addEventListener(\"scroll\", onScroll); \r\n}\r\n\r\nfunction updateScroller() {\r\n  \r\n  var resized = scroller.resizeRequest > 0;\r\n    \r\n  if (resized) {    \r\n    var height = scroller.target.clientHeight;\r\n    body.style.height = height + \"px\";\r\n    scroller.resizeRequest = 0;\r\n  }\r\n      \r\n  var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;\r\n\r\n  scroller.endY = scrollY;\r\n  scroller.y += (scrollY - scroller.y) * scroller.ease;\r\n\r\n  if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {\r\n    scroller.y = scrollY;\r\n    scroller.scrollRequest = 0;\r\n  }\r\n  \r\n  TweenLite.set(scroller.target, { \r\n    y: -scroller.y \r\n  });\r\n  \r\n  requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;\r\n}\r\n\r\nfunction onScroll() {\r\n  scroller.scrollRequest++;\r\n  if (!requestId) {\r\n    requestId = requestAnimationFrame(updateScroller);\r\n  }\r\n}\r\n\r\nfunction onResize() {\r\n  scroller.resizeRequest++;\r\n  if (!requestId) {\r\n    requestId = requestAnimationFrame(updateScroller);\r\n  }\r\n}<\/pre>\n
    That’s all! hopefully, you have successfully created a smooth scroll effect on the mouse wheel using JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Smooth scrolling on mouse wheel interactions can greatly improve the user experience of your website. This JavaScript code enables smooth…<\/p>\n","protected":false},"author":1,"featured_media":9397,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[78],"class_list":["post-9376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript","tag-scrolling"],"acf":[],"yoast_head":"\nJavaScript Smooth Scroll on Mouse Wheel — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript Smooth Scroll on Mouse Wheel. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Smooth Scroll on Mouse Wheel — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript Smooth Scroll on Mouse Wheel. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T18:02:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:03:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Smooth Scroll on Mouse Wheel\",\"datePublished\":\"2024-01-10T18:02:00+00:00\",\"dateModified\":\"2024-01-22T11:03:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/\"},\"wordCount\":280,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png\",\"keywords\":[\"Scrolling Effects\"],\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/\",\"name\":\"JavaScript Smooth Scroll on Mouse Wheel — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png\",\"datePublished\":\"2024-01-10T18:02:00+00:00\",\"dateModified\":\"2024-01-22T11:03:27+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript Smooth Scroll on Mouse Wheel. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Smooth Scroll on Mouse Wheel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Smooth Scroll on Mouse Wheel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Smooth Scroll on Mouse Wheel — CodeHim","description":"Here is a free code snippet to create a JavaScript Smooth Scroll on Mouse Wheel. You can view demo and download the source code.","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:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Smooth Scroll on Mouse Wheel — CodeHim","og_description":"Here is a free code snippet to create a JavaScript Smooth Scroll on Mouse Wheel. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T18:02:00+00:00","article_modified_time":"2024-01-22T11:03:27+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Smooth Scroll on Mouse Wheel","datePublished":"2024-01-10T18:02:00+00:00","dateModified":"2024-01-22T11:03:27+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/"},"wordCount":280,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png","keywords":["Scrolling Effects"],"articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/","url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/","name":"JavaScript Smooth Scroll on Mouse Wheel — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png","datePublished":"2024-01-10T18:02:00+00:00","dateModified":"2024-01-22T11:03:27+00:00","description":"Here is a free code snippet to create a JavaScript Smooth Scroll on Mouse Wheel. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Smooth-Scroll-on-Mouse-Wheel.png","width":1280,"height":960,"caption":"JavaScript Smooth Scroll on Mouse Wheel"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-smooth-scroll-on-mouse-wheel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Smooth Scroll on Mouse Wheel"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3082,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9376"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9376\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9397"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}