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