{"id":1264,"date":"2020-11-26T01:51:31","date_gmt":"2020-11-26T01:51:31","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=1264"},"modified":"2025-04-04T14:54:30","modified_gmt":"2025-04-04T14:54:30","slug":"tkinter-scrollbar","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-scrollbar\/","title":{"rendered":"Tkinter Scrollbar"},"content":{"rendered":"\n<p><strong>Summary<\/strong>: in this tutorial, you&#8217;ll learn about the Tkinter Scrollbar widget and how to link it to a scrollable widget.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='introduction-to-the-tkinter-scrollbar-widget'>Introduction to the Tkinter Scrollbar widget <a href=\"#introduction-to-the-tkinter-scrollbar-widget\" class=\"anchor\" id=\"introduction-to-the-tkinter-scrollbar-widget\" title=\"Anchor for Introduction to the Tkinter Scrollbar widget\">#<\/a><\/h2>\n\n\n\n<p>A scrollbar lets you view all parts of another widget whose content is typically larger than the available space.<\/p>\n\n\n\n<p>The Tkinter Scrollbar is an independent widget, not part of other widgets such as <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-text\/\" target=\"_blank\" rel=\"noopener\">Text<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-listbox\/\" target=\"_blank\" rel=\"noopener\">Listbox<\/a>.<\/p>\n\n\n\n<p>To use the scrollbar widget, you need to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, create a scrollbar widget.<\/li>\n\n\n\n<li>Second, link the scrollbar with a scrollable widget.<\/li>\n<\/ul>\n\n\n\n<p>The following shows how to create a scrollbar widget using the <code>ttk.Scrollbar<\/code> constructor:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">ttk.Scrollbar(master=<span class=\"hljs-literal\">None<\/span>,**kw)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In this syntax:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>master<\/code>: The parent widget.<\/li>\n\n\n\n<li><code>**kw<\/code>: scrollbar&#8217;s options, such as <code>orient<\/code>, <code>command<\/code>, <code>style<\/code>, and so on.<\/li>\n<\/ul>\n\n\n\n<p>For example, you can create a vertical scrollbar as follows:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">v_scrollbar = ttk.Scrollbar(\n    scrollable_widget, <span class=\"hljs-comment\"># Widget<\/span>\n    orient=tk.VERTICAL, <span class=\"hljs-comment\"># Vertical scrollbar<\/span>\n    command=scrollable_widget.yview <span class=\"hljs-comment\"># Link scrollbar to scrollable_widget widget<\/span>\n)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This example creates a vertical scrollbar for a scrollable_widget:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>scrollable_widget<\/code> is an instance of a scrollable widget, which can be a <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-text\/\">Text<\/a>, <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-listbox\/\">Listbox<\/a>, and <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-canvas\/\">Canvas<\/a>.<\/li>\n\n\n\n<li><code>orient<\/code> specifies the orientation of the scrollbar, which can be vertical and horizontal. The <code>orient<\/code> accepts either <code>tk.VERTICAL<\/code> or <code>tk.HORIZONTAL<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>The scrollable widget also needs to communicate back to the scrollbar about the percentage of the content area currently visible.<\/p>\n\n\n\n<p>To do it, you assign the <code>scrollbar.set<\/code> method to the <code>yscrollcommand<\/code> and\/or <code>xscrollcommand<\/code> option of scrollbar:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">scrollable_widget&#91;<span class=\"hljs-string\">'yscrollcommand'<\/span>] = scrollbar.set<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='adding-a-scrollbar-to-a-text-widget'>Adding a scrollbar to a Text widget <a href=\"#adding-a-scrollbar-to-a-text-widget\" class=\"anchor\" id=\"adding-a-scrollbar-to-a-text-widget\" title=\"Anchor for Adding a scrollbar to a Text widget\">#<\/a><\/h2>\n\n\n\n<p>The following program shows how to add a scrollbar to a <code>Text<\/code> widget:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">import<\/span> tkinter <span class=\"hljs-keyword\">as<\/span> tk\n<span class=\"hljs-keyword\">from<\/span> tkinter <span class=\"hljs-keyword\">import<\/span> ttk\n\nroot = tk.Tk()\nroot.title(<span class=\"hljs-string\">\"Tkinter Scrollbar\"<\/span>)\n\n\nframe = ttk.Frame(root)\nframe.pack(padx=<span class=\"hljs-number\">10<\/span>, pady=<span class=\"hljs-number\">10<\/span>, fill=tk.BOTH, expand=<span class=\"hljs-literal\">True<\/span>)\n\n<span class=\"hljs-comment\"># create a scrollbar and add it to the frame<\/span>\nv_scrollbar = ttk.Scrollbar(frame)\nv_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)\n\n<span class=\"hljs-comment\"># create a text widget and add it to the frame<\/span>\ntext = tk.Text(frame, height=<span class=\"hljs-number\">8<\/span>)\ntext.pack(side=tk.LEFT, expand=<span class=\"hljs-literal\">True<\/span>, fill=tk.BOTH, )\n\n<span class=\"hljs-comment\"># configure scrollbar<\/span>\ntext&#91;<span class=\"hljs-string\">'yscrollcommand'<\/span>]=v_scrollbar.set\nv_scrollbar.config(command=text.yview)\n\n<span class=\"hljs-comment\"># insert some text into the text widget<\/span>\ntext.insert(tk.END, <span class=\"hljs-string\">\"\\n\"<\/span> * <span class=\"hljs-number\">20<\/span>)\n\nroot.mainloop()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Output:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"687\" height=\"188\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2025\/04\/tkinter-scrollbar-widget.png\" alt=\"tkinter scrollbar widget\" class=\"wp-image-7464\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2025\/04\/tkinter-scrollbar-widget.png 687w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2025\/04\/tkinter-scrollbar-widget-300x82.png 300w\" sizes=\"auto, (max-width: 687px) 100vw, 687px\" \/><\/figure>\n\n\n\n<p>How it works:<\/p>\n\n\n\n<p>First, <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-frame\/\">create a frame<\/a> to hold both <code>Text<\/code> and <code>Scrollbar<\/code> widgets:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">frame = ttk.Frame(root)\nframe.pack(padx=<span class=\"hljs-number\">10<\/span>, pady=<span class=\"hljs-number\">10<\/span>, fill=tk.BOTH, expand=<span class=\"hljs-keyword\">True<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We add a padding of 10 around the frame using <code>padx<\/code> and <code>pady<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">padx=10, pady=10,<\/code><\/span><\/pre>\n\n\n<p>We also make the frame expansible and fill all available space:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">fill=tk.BOTH, expand=<span class=\"hljs-keyword\">True<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>By doing this, when we change the size of the <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-window\/\">window<\/a>, the size of the frame automatically adjusts to the size of the window accordingly. This makes the frame responsive.<\/p>\n\n\n\n<p>Next, create a vertical scrollbar and <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-pack\/\">pack<\/a> it on the right side (<code>side=tk.RIGHT<\/code>) of the frame:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">v_scrollbar = ttk.Scrollbar(frame)\nv_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)<\/code><\/span><\/pre>\n\n\n<p>We set the <code>fill<\/code> to <code>tk.Y<\/code> to ensure that the scrollbar can fill all vertical spaces within the frame.<\/p>\n\n\n\n<p>Then, create a <code>Text<\/code> widget and pack it on the left side (<code>side=tk.LEFT<\/code>) of the frame:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">text = tk.Text(frame, height=<span class=\"hljs-number\">8<\/span>)\ntext.pack(side=tk.LEFT, expand=<span class=\"hljs-keyword\">True<\/span>, fill=tk.BOTH)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>After that, associate the <code>Scrollbar<\/code> widget with the <code>Text<\/code> widget by assigning the <code>v_scrollbar.set<\/code> method to <code>yscrollcommand<\/code> of the <code>Text<\/code> widget and <code>text.yview<\/code> of the <code>Text<\/code> widget to the command of the <code>Scrollbar<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">text.config(yscrollcommand=v_scrollbar.set)\nv_scrollbar.config(command=text.yview)<\/code><\/span><\/pre>\n\n\n<p>Finally, add 20 blank lines to the <code>Text<\/code> widget to make the scrollbar visible on the <code>Text<\/code> widget:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">text<\/span><span class=\"hljs-selector-class\">.insert<\/span>(<span class=\"hljs-selector-tag\">tk<\/span><span class=\"hljs-selector-class\">.END<\/span>, \"\\<span class=\"hljs-selector-tag\">n<\/span>\" * 20)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='adding-scrollbar-to-other-widgets'>Adding scrollbar to other widgets <a href=\"#adding-scrollbar-to-other-widgets\" class=\"anchor\" id=\"adding-scrollbar-to-other-widgets\" title=\"Anchor for Adding scrollbar to other widgets\">#<\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-listbox\/#adding-a-scrollbar-to-the-listbox\" target=\"_blank\" rel=\"noreferrer noopener\">Adding a scrollbar to a Listbox<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-treeview\/#adding-a-scrollbar-to-the-treeview-widget\" target=\"_blank\" rel=\"noreferrer noopener\">Adding a scrollbar to a Treeview<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id='summary'>Summary <a href=\"#summary\" class=\"anchor\" id=\"summary\" title=\"Anchor for Summary\">#<\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <code>Scrollbar<\/code> widget to scrollable widgets like <code>Text<\/code> widget.<\/li>\n<\/ul>\n<div class=\"helpful-block-content\" data-title=\"\">\n\t<header>\n\t\t<div class=\"wth-question\">Was this tutorial helpful ?<\/div>\n\t\t<div class=\"wth-thumbs\">\n\t\t\t<button\n\t\t\t\tdata-post=\"1264\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-scrollbar\/\"\n\t\t\t\tdata-post-title=\"Tkinter Scrollbar\"\n\t\t\t\tdata-response=\"1\"\n\t\t\t\tclass=\"wth-btn-rounded wth-yes-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\tclass=\"feather feather-thumbs-up block w-full h-full\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t<button\n\t\t\t\tdata-response=\"0\"\n\t\t\t\tdata-post=\"1264\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-scrollbar\/\"\n\t\t\t\tdata-post-title=\"Tkinter Scrollbar\"\n\t\t\t\tclass=\"wth-btn-rounded wth-no-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t<div class=\"wth-form hidden\">\n\t\t<div class=\"wth-form-wrapper\">\n\t\t\t<div class=\"wth-title\"><\/div>\n\t\t\t<textarea class=\"wth-message\"><\/textarea>\n\t\t\t<input type=\"button\" name=\"wth-submit\" class=\"wth-btn wth-btn-submit\" id=\"wth-submit\" \/>\n\t\t\t<input type=\"button\" class=\"wth-btn wth-btn-cancel\" value=\"Cancel\" \/>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you&#8217;ll learn about the Tkinter Scrollbar widget and how to link it to a scrollable widget.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1232,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1264","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/comments?post=1264"}],"version-history":[{"count":5,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1264\/revisions"}],"predecessor-version":[{"id":7513,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1264\/revisions\/7513"}],"up":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1232"}],"wp:attachment":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/media?parent=1264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}