We Keep Coding

Enable scrolling the background when the modal is closed using the back key instead of the modal close button

I have the following code for opening a modal box and then closing it using its inbuilt close button. Also, it has a feature: When the modal is open, one can scroll inside the modal box but can't scroll through the background stuff. Here, background stuff means anything that I have before opening the modal.
The point is if I use browser back-arrow or mobile back key to close the modal, then it is possible to close the modal, but once I close the modal using these external sources, the scrolling of background stuff is disabled.
So, what do I want?
I want a code that has all features of the previous code; and
I can use the browser back-arrow or mobile back key for closing the modal similarly as I use the inbuilt close button of the modal for the same purpose.
HTML:
<a class="button" href="#modal28" style="font-size:50px" onclick='return disableScrolling()' >
Open Button
</a>
<div class="popup" id="modal28">
<a class="popup__overlay" href="#"></a>
<div class="popup__wrapper">
<a class="popup_close; button" href="#close" onclick='return enableScrolling()' style="text-decoration:none; color:yellow; font-size:20px; background-color: black; border-radius: 90px;
border: 3px solid #00d7c3; padding: 0px 15px; podition:relative; transform: translate(0%, 80%); text-align: center;" >
Close Button
</a>
<center><div class="frame">
<br/> <br/>Inside of Modal. Here I can scroll without scrolling the background stuff.
</div></center>
</div>
</div>
<h1><center>Background Stuff</center> </h1>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
CSS:
<style>
#import 'https://fonts.googleapis.com/css?family=Prompt:400,700';
body{ font-family: 'Prompt', sans-serif;}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
right: 20px;
font-family: 'Prompt', sans-serif;
text-decoration: none;
}
.button {
background-color: transparent;
-webkit-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
color: black;
}
.button:hover {
box-shadow: 0 0 0px 0 #fff inset, 0px 0px 15px 15px #fff;
}
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 0;
background: #000;
background-image: repeating-linear-gradient(
to bottom,
transparent 7px,
rgba(0, 0, 0, 0.8) 9px,
rgba(0, 0, 0, 0.8) 13px,
transparent 13px
);
color:white;
overflow: auto;
}
.popup__close {
position: absolute;
}
</style>
JavaScript for scrolling before/after closing popup modal box:
<script>
function disable(){
document.body.style.overflow = 'hidden';}
function enable(){
document.body.style.overflow = 'scroll';}
function disableScrolling() {
disable();}
function enableScrolling() {
enable();}
</script>

How do I synchronise scrolling of two different sized boxes using one as a reference using JavaScript

I have two boxes, one is smaller then the other. The small box contains the same text as the other, but since it's smaller auto scrolling takes a longer time. I would like the big box to end scrolling the same time the small box ends.
let stepSize = 0.5;
let masterSpeed = 50;
let masterElement = document.getElementById("master-box");
let slaveElement = document.getElementById("slave-box");
var scroll = 0;
window.setInterval(function(){
if(masterElement.scrollTop > scroll)
scroll = masterElement.scrollTop;
masterElement.scrollTo({ top: scroll, behavior: 'smooth' })
scroll += 1;
}, masterSpeed); //THIS WILL RUN IN EVERY 50 MILISECONDS
// Match slave speed to master speed
let masterDistance = masterElement.scrollHeight - masterElement.clientHeight;
let masterScrollTime = masterDistance / masterSpeed;
let syncedSpeed = masterDistance / masterScrollTime;
window.setInterval(function(){
if(slaveElement.scrollTop > scroll)
scroll = slaveElement.scrollTop;
slaveElement.scrollTo({ top: scroll, behavior: 'smooth' })
scroll += 1;
}, syncedSpeed); //THIS WILL RUN IN EVERY 50 MILISECONDS
.container {
display: flex;
}
span {
display: block;
height : 3px;
background: red;
}
.box1{
width: 100px;
height: 200px;
overflow-y: auto;
border: 2px solid blue;
margin: 10px;
}
.box2{
width: 200px;
height: 300px;
overflow-y: auto;
border: 2px solid blue;
margin: 10px;
}
<div class="container">
<div class="box1" id="master-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div>
<div class="box2" id="slave-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div>
</div>

Do not use setInterval twice. Instead, update the second one using a percentage of scroll instead of just using the same scrollTop.
Also, setting the behavior to smooth was causing animations to run which could interfere with your scrolling commands.
Lastly, you need to take the scrollHeight and clientHeight into account.
const masterSpeed = 50;
const stepSize = 10;
const masterElement = document.getElementById("master-box");
const slaveElement = document.getElementById("slave-box");
const masterScrollHeight = masterElement.scrollHeight;
const slaveScrollHeight = slaveElement.scrollHeight;
const masterClientHeight = masterElement.clientHeight;
const slaveClientHeight = slaveElement.clientHeight;
const masterHeight = masterScrollHeight - masterClientHeight;
const slaveHeight = slaveScrollHeight - slaveClientHeight;
/*
console.log({
masterScrollHeight,
slaveScrollHeight,
masterClientHeight,
slaveClientHeight,
masterHeight,
slaveHeight
});
*/
let interval = window.setInterval(function() {
const currentMasterScrollTop = masterElement.scrollTop;
const newMasterScrollTop = currentMasterScrollTop + stepSize;
if (newMasterScrollTop > masterHeight) {
window.clearInterval(interval);
interval = null;
}
const percentageMasterDone = newMasterScrollTop / masterHeight;
const newSlaveScrollTop = Math.ceil(percentageMasterDone * slaveHeight);
/*
console.log({
currentMasterScrollTop,
newMasterScrollTop,
percentageMasterDone,
newMasterScrollTop,
newSlaveScrollTop
});
*/
masterElement.scrollTo({
top: newMasterScrollTop
});
slaveElement.scrollTo({
top: newSlaveScrollTop
})
}, masterSpeed); //THIS WILL RUN IN EVERY 50 MILISECONDS
.container {
display: flex;
}
span {
display: block;
height: 3px;
background: red;
}
.box1 {
width: 100px;
height: 200px;
overflow-y: auto;
border: 2px solid blue;
margin: 10px;
}
.box2 {
width: 200px;
height: 300px;
overflow-y: auto;
border: 2px solid blue;
margin: 10px;
}
<div class="container">
<div class="box1" id="master-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur
sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam
autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div>
<div class="box2" id="slave-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur
sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam
autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div>
</div>

Use percentages rather than the scroll index. Make a couple of helper functions and it'll be much easier to understand. Behold:
let masterElement = document.getElementById("master-box");
let slaveElement = document.getElementById("slave-box");
// Scroll to a percentage of the vertical height
function scrollToPct(element, pct){
var scroll = (element.scrollHeight - element.clientHeight) / 100 * pct;
element.scrollTo({ top: scroll, behavior: 'smooth' });
}
// Get the percentage of vertical scroll
function getScrollPct(element){
return element.scrollTop / (element.scrollHeight - element.clientHeight) * 100;
}
// Listen to the mastre element and update the slave element accordingly
masterElement.addEventListener('scroll', function(){
var scroll_pct = getScrollPct(this);
scrollToPct(slaveElement, scroll_pct);
});
// turn on the autoscroll
setInterval(function(){
var scroll_pct = getScrollPct(masterElement);
scrollToPct(masterElement, scroll_pct + 5);
}, 10);
.container {
display: flex;
}
span {
display: block;
height : 3px;
background: red;
}
.box1{
width: 100px;
height: 200px;
overflow-y: auto;
border: 2px solid blue;
margin: 10px;
}
.box2{
width: 200px;
height: 300px;
overflow-y: auto;
border: 2px solid blue;
margin: 10px;
}
<div class="container">
<div class="box1" id="master-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div>
<div class="box2" id="slave-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div>
</div>

Problem in animate scrollTop for multi div

I have two div with id (# left-div - # right-div). In # left-div i have multi div with id and # left-div's overflow-y is scroll. In # right-div i have multi button with id. I want after click on each button, # left-div scroll to show Specific div that button clicked. I use jquery. How to create this action?
This is my code:
<div id="#left-div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<div id="#right-div">
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
</div>

What you can do is have the same class for a div and it's associated button.when the button is clicked you can get elements which have that class and scroll to the first element.
$(document).ready(function() {
$("button").click(function() {
var element = $(this);
var className = element.attr("class");
var x = document.getElementsByClassName(className);
$("html, body").animate(
{
scrollTop: $(x[0]).offset().top
},
2000
);
});
});
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: green;
}
#div4 {
background-color: blue;
}
#left-div {
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8">
<div id="left-div">
<div id="div1" class="element1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div2" class="element2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div3" class="element3">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div4" class="element4">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
</div>
</div>
<div class="col-4">
<div id="right-div">
<button id="btn1" class="element1">Bt1</button>
<button id="btn2" class="element2">Btn2</button>
<button id="btn3" class="element3">Btn3</button>
<button id="btn4" class="element4">Btn4</button>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

Smooth Scrolling for scrollIntoView() function is not working in chrome browser

I have a button. When clicked upon, I make the page scroll to a div. That's working perfectly in mozilla and IE but its not working properly in chrome browser since its mentioned in nativaly supported. Please suggest what was the issue.
window.addEventListener('load', function() {
// scroll into view
document.querySelector('.js-scroll-into-hello').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.hello').scrollIntoView({ behavior: 'smooth' });
});
});
<div class="actions">
<button class="btn js-scroll-into-hello">Scroll into view</button>
</div>
<article class="scrollable-parent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<h3 class="hello"><em>hello!</em></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
</article>
</div>

Javascript - upset offset position when scrolling

I'm trying to create a sticky table header, I'm trying to capture the position of an element when the page scrolls
In the example the console just outputs the first values and doesn'y upset.
How do I upset of the offset when scrolling.
var blockPos = document.getElementById('block').offsetTop
window.addEventListener('scroll', function () {
//var blockPos = document.getElementById('block').offsetTop
console.log(blockPos)
});
html, body{
background: grey;
height: 100%;
}
.page{
background: white;
margin: 0 auto;
max-width: 1200px;
}
.content{
margin: 0 auto;
width: 90%;
}
.text{
}
#block{
background: red;
height: 100px;
width: 100px;
}
<div class="page">
<div class="content">
<div class="text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<div id="block"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
</div>
</div>
</div>

function update(){
var blockPos = document.getElementById('block').offsetTop;
console.log(blockPos)
}
window.addEventListener('scroll', function () {
update();
});
Try this code

If you want a sticky header, I have 2 solutions for you.
Check out the snippet, live demo.
1. CSS method - display: fixed
very easy way by setting display: fixed, but not working under IE 8 or below.
2. JS method
listen to scroll event, caculating the scroll top value while scrolling
display: absolute, and update the value of top while scrolling.
var element = document.body;
var computedFixedElement = document.getElementById('pos-abs');
// record the original Y for `body`
var y = element.getBoundingClientRect().y;
window.addEventListener('scroll', function () {
var bodyScrollTop = - element.getBoundingClientRect().top;
computedFixedElement.style.top = bodyScrollTop + y + 'px';
});
html, body{
background: grey;
margin: 0;
/* height: 100%;
overflow: scroll; */
}
.pos-fixed{
background: red;
width: 50%;
height: 30px;
position: fixed;
top: 0;
left: 0;
}
.pos-abs {
background: blue;
width: 50%;
height: 30px;
position: absolute;
right: 0;
top: 0;
}
.page{
background: white;
margin: 0 auto;
max-width: 1200px;
}
.content{
margin: 0 auto;
width: 90%;
}
.text{
}
#block{
background: red;
height: 100px;
width: 100px;
}
<div class="page" id="page">
<div class="pos-fixed">
using position: fixed
</div>
<div id="pos-abs" class="pos-abs">
using position: absolute
</div>
<div class="content">
<div class="text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<div id="block"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
</div>
</div>
</div>