diff --git a/chatapp.svg b/chatapp.svg
index 2f2acde..9144d40 100644
--- a/chatapp.svg
+++ b/chatapp.svg
@@ -130,6 +130,7 @@ function TextChatMessage(message_text, is_myself) {
         'fill': text_color,
         'width': '5%'
       });
+      enable_scrolling(tspan)
 
       if(is_hyperlink(line)) {
         tspan.appendChild(create_link_node(line));
@@ -246,6 +247,7 @@ function create_bubble(inner_element, color) {
     'rx': 8,
     'fill': color,
   });
+  enable_scrolling(bubble);
   return bubble;
 }
 
@@ -417,6 +419,16 @@ async function scroll_down() {
   current_dialog.scroll_by(-line_height);
 }
 
+const on_wheel = (e) => { e.deltaY < 0 ? scroll_up() : scroll_down() }
+
+const enable_scrolling = (elem) => elem.addEventListener('wheel', on_wheel);
+
+// enable scrolling
+document.addEventListener(
+    "DOMContentLoaded",
+    () => document.getElementById("message_box").addEventListener('wheel', on_wheel)
+)
+
 async function dialog_ven() {
   let d = new Dialog();
   current_dialog = d;
@@ -525,7 +537,7 @@ async function dialog_nabopige() {
 </g>
 
 <!-- [right] messages view -->
-<rect x="300" y="50" width="300" height="450" fill="white" />
+<rect id="message_box" x="300" y="50" width="300" height="450" fill="white" />
 <g id="messages"></g>
 
 <!-- [right] message status -->