I have a development with google maps, when I click on a marker of any location, I want to focus the card of a certain marker, but since I have two scroll bars I want to limit the main bar ONLY when a marker is clicked. for example: if you click on "click J" the anchor link is going to focus CARD J but the main scroll bar is going to move down, I dont know how to prevent that
"https://codepen.io/nikoocrow/pen/gOzRpbZ"
You can do this with javascript but I don't think its possible with only css. Here is an example:
const links = document.querySelectorAll('.click a')
const scrollWrapper = document.querySelector('.left-container')
links.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault()
const el = document.querySelector(link.getAttribute('href'))
scrollWrapper.scrollTo({
top: el.offsetTop,
behavior: 'smooth'
})
})
})@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
body{
font-family: 'Poppins', sans-serif;
}
.container{
margin: 0px;
padding: 0px;
width: 100%;
display: flex;
box-shadow: 0px 0px 4px 0px rgba(22,22,99,0.30);
}
.left-container{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0px;
width: 35%;
height: 60vh;
overflow-x: hidden;
overflow-y: scroll;
}
.right-container{
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
height: 60vh;
width: 65%;
}
.card{
padding: 0px 50px;
border-radius: 20px;
text-align: center;
margin: 40px;
width: 70%;
height: 300px;
box-shadow: 0px 0px 4px 0px rgba(22,22,99,0.30);
}
.click{
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
background-color: aliceblue;
}
.click a{
text-align: center;
text-decoration: none;
width: 350px;
height: 50px;
}
.text-container{
padding: 5rem;
} <div class="container">
<div class="left-container">
<div class="card" id="a">
<h1>A</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="b">
<h1>B</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="c">
<h1>C</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="d">
<h1>D</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="e">
<h1>E</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="f">
<h1>F</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="g">
<h1>G</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="h" >
<h1>H</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="i">
<h1>I</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
<div class="card" id="j">
<h1>J</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis autem ullam, sunt laborum vitae perferendis earum, odit eum esse eveniet cum explicabo. Temporibus accusamus accusantium enim laborum vero corporis?</p>
</div>
</div>
<div class="right-container">
<div class="click">
<a href="#j">CLIC J</a>
</div>
<div class="click">
<a href="#i">CLIC I</a>
</div>
<div class="click">
<a href="#h">CLIC H</a>
</div>
<div class="click">
<a href="#g">CLIC G</a>
</div>
<div class="click">
<a href="#f">CLIC F</a>
</div>
<div class="click">
<a href="#d">CLIC D</a>
</div>
<div class="click">
<a href="#c">CLIC C</a>
</div>
<div class="click">
<a href="#b">CLIC B</a>
</div>
<div class="click">
<a href="#a">CLIC A</a>
</div>
</div>
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non suscipit sapien, sed congue ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In bibendum lacus nec dictum lacinia. Fusce at mauris varius, convallis libero ac, ullamcorper nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sapien varius, sodales ipsum nec, tincidunt lectus. Proin urna nunc, vehicula nec lectus eu, consequat fringilla velit. In hac habitasse platea dictumst. Proin non massa et purus consectetur eleifend eget id lectus. In iaculis arcu id leo lobortis efficitur. Aliquam eu felis diam. Maecenas odio neque, aliquet a odio ut, porttitor aliquet purus. Nullam tincidunt consequat massa id finibus. Nulla vulputate mattis lectus, ut rutrum lectus vestibulum ac. Quisque interdum gravida neque accumsan volutpat.</p>
</div>