{"id":7591,"date":"2019-04-01T06:09:26","date_gmt":"2019-04-01T10:09:26","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=7591"},"modified":"2021-12-08T11:08:01","modified_gmt":"2021-12-08T16:08:01","slug":"scrollbars-iframe-html5-web-page","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/","title":{"rendered":"Here&#8217;s How to Add Scrollbars to an iframe in HTML"},"content":{"rendered":"\n<p>Since back in the early days of the iframe, adding to it has always been a straightforward task. This would be done using the <a href=\"http:\/\/local.brightwhiz\/tag\/html\/\">HTML<\/a> iframe tag scrolling attribute and setting it to &#8220;<strong>yes<\/strong>&#8220;.<\/p>\n\n\n\n<p>Now if you are keen enough you will notice we have been discussing this issue in the past tense. This is because like all most things in the programming world, they tend to get deprecated sooner or later. The iframe scrolling attribute is one such example.<\/p>\n\n\n\n<p>HTML5 has dropped support for the iframe scrolling attribute in favor of <a href=\"http:\/\/local.brightwhiz\/tag\/css\/\">CSS<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The old Ways to Scrollbars<\/h2>\n\n\n\n<p>Here is an example of how you would use scrollbars on an iframe prior to HTML5<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;iframe src=&quot;\/&quot; width=&quot;400&quot; height=&quot;200&quot; scrolling=&quot;yes&quot;&gt;&lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<p>With the values on the scrolling being <strong>yes, no<\/strong>, or <strong>auto<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Proper Way to Scrollbars With CSS<\/h2>\n\n\n\n<p>Since HTML5 you are required to use CSS to add scrollbars to an iframe. The following is the code snippet you would use:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">iframe {\n overflow: scroll;\n width: 100%;\n height: 100%;\n }<\/code><\/pre>\n\n\n\n<p>You can also specify whether you would want a vertical scrollbar or horizontal scrollbar by using one of the following.<\/p>\n\n\n\n<p>For horizontal scrolling:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\"> iframe {\n overflow-x: scroll;\n ...\n }<\/code><\/pre>\n\n\n\n<p>For vertical scrolling:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">iframe {\n overflow-y: scroll;\n ...\n }<\/code><\/pre>\n\n\n\n<p>There you have it. That is how simple it is to add scrollbars to an iframe using CSS and not the scrolling attribute.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since back in the early days of the iframe, adding to it has always been a straightforward task. This would be done using the HTML iframe tag scrolling attribute and&#8230;<\/p>\n","protected":false},"author":1,"featured_media":7592,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,9,27,16,17],"tags":[170,303,543,544,635,637,638],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Scrollbars to an iframe in a HTML Web Page<\/title>\n<meta name=\"description\" content=\"This is the right way to add scrollbars to an iframe in your HTML web page without using the scrolling attribute in the ifram tag\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Scrollbars to an iframe in a HTML Web Page\" \/>\n<meta property=\"og:description\" content=\"This is the right way to add scrollbars to an iframe in your HTML web page without using the scrolling attribute in the ifram tag\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-01T10:09:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T16:08:01+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"Here&#8217;s How to Add Scrollbars to an iframe in HTML\",\"datePublished\":\"2019-04-01T10:09:26+00:00\",\"dateModified\":\"2021-12-08T16:08:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/\"},\"wordCount\":215,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"Software Design\",\"Software development\",\"Web\",\"Web Design\",\"Web Development\"],\"articleSection\":[\"Articles\",\"Guides\",\"How To\",\"Programming\",\"Technology\",\"Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/\",\"url\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/\",\"name\":\"How to Add Scrollbars to an iframe in a HTML Web Page\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg\",\"datePublished\":\"2019-04-01T10:09:26+00:00\",\"dateModified\":\"2021-12-08T16:08:01+00:00\",\"description\":\"This is the right way to add scrollbars to an iframe in your HTML web page without using the scrolling attribute in the ifram tag\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg\",\"width\":1200,\"height\":630,\"caption\":\"HTML5 Scrollbars\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Here&#8217;s How to Add Scrollbars to an iframe in HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/x.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Scrollbars to an iframe in a HTML Web Page","description":"This is the right way to add scrollbars to an iframe in your HTML web page without using the scrolling attribute in the ifram tag","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":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Scrollbars to an iframe in a HTML Web Page","og_description":"This is the right way to add scrollbars to an iframe in your HTML web page without using the scrolling attribute in the ifram tag","og_url":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2019-04-01T10:09:26+00:00","article_modified_time":"2021-12-08T16:08:01+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"Here&#8217;s How to Add Scrollbars to an iframe in HTML","datePublished":"2019-04-01T10:09:26+00:00","dateModified":"2021-12-08T16:08:01+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/"},"wordCount":215,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg","keywords":["CSS","HTML","Software Design","Software development","Web","Web Design","Web Development"],"articleSection":["Articles","Guides","How To","Programming","Technology","Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/","url":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/","name":"How to Add Scrollbars to an iframe in a HTML Web Page","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg","datePublished":"2019-04-01T10:09:26+00:00","dateModified":"2021-12-08T16:08:01+00:00","description":"This is the right way to add scrollbars to an iframe in your HTML web page without using the scrolling attribute in the ifram tag","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/03\/html5-scrollbar.jpg","width":1200,"height":630,"caption":"HTML5 Scrollbars"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/scrollbars-iframe-html5-web-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"Here&#8217;s How to Add Scrollbars to an iframe in HTML"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/x.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/7591"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=7591"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/7591\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/7592"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=7591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=7591"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=7591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}