Merge pull request #1504 from LoiueFragosoUwUr/main

Scroll in gita storyline is visible and resets its position when changing dialog in bubbles

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;

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();