From 91f871b2a231139cb6a9884cddf22c1f250f219f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Louie=E5=A3=AE=E7=9C=9FUwUr=5F=E6=9F=94?=
 <lfragosoc1300@alumno.ipn.mx>
Date: Sun, 7 Apr 2024 12:35:21 -0600
Subject: [PATCH] Scroll in gita storyline is visible and resets its position

---
 Gita-Storyline/storyline.css | 14 +++++++++++---
 Gita-Storyline/storyline.js  | 14 ++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/Gita-Storyline/storyline.css b/Gita-Storyline/storyline.css
index 9eef1e74..4c60b34e 100644
--- a/Gita-Storyline/storyline.css
+++ b/Gita-Storyline/storyline.css
@@ -218,7 +218,7 @@ background-size: cover;
 .bubble1 {
     --r: 25px; /* the radius */
     --t: 40px; /* the size of the tail */
-    
+     
     max-width: 300px;
     max-height: 200px;
     padding: calc(2*var(--r)/3);
@@ -248,10 +248,17 @@ background-size: cover;
     margin-top: -11rem;
 }
 .bubble2 {    
-    
+      
+      
+      scrollbar-color: blue orange;
+      scrollbar-width: thin;
+      scroll-margin-top: 0;
+      
       margin-bottom: 8rem;
       overflow-wrap: break-word;
-      overflow-y: auto;
+      overflow-y: scroll;
+      
+      
     --r: 25px; /* the radius */
     --t: 40px; /* the size of the tail */
     
@@ -276,6 +283,7 @@ background-size: cover;
 .bubble2::-webkit-scrollbar {
     display: none;
 }
+
   .left {
     --_d: 0%;
     border-left: var(--t) solid #0000;
diff --git a/Gita-Storyline/storyline.js b/Gita-Storyline/storyline.js
index 2cc314a6..a212d10a 100644
--- a/Gita-Storyline/storyline.js
+++ b/Gita-Storyline/storyline.js
@@ -1,6 +1,6 @@
 const arjunaConversation = document.querySelector(".arjuna-conversation");   // making this two classes arjuna and krishna
 const krishnaConversation = document.querySelector(".krishna-conversation");
-
+var bubble2 = document.querySelector('.bubble2');
 const question = [
   {
     Arjuna: "What should one do when parents don't understand him/her? ",
@@ -61,8 +61,13 @@ function showQuestion(){
   let currentQuestion = question[currentQuestionIndex];
   arjunaConversation.innerText = currentQuestion.Arjuna;
   krishnaConversation.innerText = currentQuestion.Krishna;
+  
+}
+function initialize_scroll(){
+  
+  bubble2.scrollTop=0;
+  
 }
-
 document.addEventListener('keydown',(e)=>{
   if(e.keyCode == 37) {
     currentQuestionIndex = (currentQuestionIndex - 1 + question.length) % question.length;
@@ -77,14 +82,19 @@ document.addEventListener('keydown',(e)=>{
 let left=document.getElementById("left")
 let right=document.getElementById('right')
 
+
 left.addEventListener("click", () => {
+  
   currentQuestionIndex = (currentQuestionIndex - 1 + question.length) % question.length;
   showQuestion();
+  initialize_scroll();
+
 });
 
 right.addEventListener("click", () => {
   currentQuestionIndex = (currentQuestionIndex + 1) % question.length;
   showQuestion();
+  initialize_scroll();
 });
 
 showQuestion();