My Slide Out Shopping Cart Wont Scroll With Page

Question

https://github.com/koukalcreativeco/Web-Store.git

Github code is above, I have a slide out shopping cart on this page. When I add too many items to the cart they start to go off the screen. I want to be able to scroll down on the cart. How would I go about doing that?

Answer 1

This one can be implemented quite easily by making use of the overflow attribute of your .shoppingcart class in CSS.

Simply add overflow: auto to the shopping cart class as shown below.

/* adding functions to buttons */

const ready = () => {
    var removeCartItemButtons = document.getElementsByClassName('bt-remove');
    for (let i = 0; i < removeCartItemButtons.length; i++){
        var button = removeCartItemButtons[i];
        button.addEventListener('click', removeCartItem);
    }

    var quantityInputs = document.getElementsByClassName('cart-quantity-input');
    for (let i = 0; i < quantityInputs.length; i++){
        var input = quantityInputs[i];
        input.addEventListener('click', quantityChanged);
    }

    var addToCartButtons = document.getElementsByClassName('add-item-button');
    for(let i = 0; i < addToCartButtons.length; i++){
        var button = addToCartButtons[i];
        button.addEventListener('click', addToCartClicked); 
    }
    document.getElementsByClassName('bt-purchase')[0].addEventListener('click', purchaseClicked);
    
}

/* In cart buttons and quantity */


function purchaseClicked() {
    alert('Thank you for your purchase')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}

function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

/* Adding Items to the Cart */

const addToCartClicked = (event) => {
    var button = event.target;
    var shopItem = button.parentElement.parentElement;
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText;
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText;
    var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src;
    addItemToCart(title, price, imageSrc);
    updateCartTotal();
}

const addItemToCart = (title, price, imageSrc) => {
    var cartRow = document.createElement('div');
    cartRow.classList.add('cart-row');
    var cartItems = document.getElementsByClassName('cart-items')[0];
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title');
    for(let i = 0; i < cartItemNames.length; i++){
        if (cartItemNames[i].innerText == title){
            alert('This item is already added to the cart')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="50" height="50">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="bt bt-remove" type="button">REMOVE</button>
        </div>`
        cartRow.innerHTML = cartRowContents;
        cartItems.append(cartRow);
        cartRow.getElementsByClassName('bt-remove')[0].addEventListener('click', removeCartItem);
        cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged);
}

/* Updating Total */

const updateCartTotal = () => {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0];
    var cartRows = cartItemContainer.getElementsByClassName('cart-row');
    var total = 0;
    for (let i = 0; i < cartRows.length; i++){
        var cartRow = cartRows[i];
        var priceElement = cartRow.getElementsByClassName('cart-price')[0];
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0];
        var price = parseFloat(priceElement.innerText.replace('$', ''));
        var quantity = quantityElement.value;
        total = total + (price * quantity);
    }
    total = Math.round(total * 100) / 100;
    document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total;
}

/* Shopping Cart Animation */

const navSlide = () => {
    const cart = document.querySelector('#cart');
    const nav = document.querySelector('.shopping-cart');

    cart.addEventListener('click', () =>{
        nav.classList.toggle('nav-active')
    });
}

/* Calling All Functions */

navSlide();

ready();

* {
    color: #FF875B;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    font-family: 'Roboto Flex', sans-serif;
}



.flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Header section*/

  header {
    display: flex;
  width: 100%;
  position: fixed;
  z-index: 20;
  height: 75px;
  background-color: #FED9CB;
  align-items: center;
}



.nav {
    display:flex;
    justify-content: flex-end;
    padding-right: 10px;
  flex: 4 1 0%;
  
}

#cart{
    cursor: pointer;
}

a {
  margin-left: 25px;
  margin-right: 5px;
}


#logo {
    height: 75px;
    width: 75px;
    
}

.material-icons {
font-size: 75px;
color: white;
}

/* Home Page Section*/

#feature {
    height: 700px;
    width: 100%;
    background-image: url("./photos/feature.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 70px;
    display:flex;
   
    margin: 0 auto;
    justify-content: center;
}

#feature .content {
    margin: auto;
    background-color: #FFF4F0;
    height: 100px;
    width: 100%;
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    letter-spacing: 5px;
}

/* Store Section */

#store {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Luxurious Roman', cursive;
    font-weight: bold;
}

#store h3 {
    letter-spacing: 3px;
    font-family: 'Montserrat', sans-serif;
}

#items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: 'Abel', sans-serif;
}

#store img {
    height: 240px;
    width: 240px;
    border-radius: 25px;
    border-color: #FED9CB;
    border: 3px;
}

.store-info {
    display: flex;
    justify-content:center;
    flex-flow:column wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.bt {
    border-radius: 15px;
    background-color:#FF875B;
    border-color: #FFF4F0;
    color:#FFF4F0;
    padding: 5px 10px;
}

.bt:hover {
    background-color: #FFF4F0;
    color: #FF875B;
    cursor: pointer;
}

/* Footer Section */

footer {
    background-color: #FED9CB;
    width: 100%;
    height: 100px;
    bottom: 0px;
}

#footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Shopping Cart Section */

.cart-row {
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    flex-direction: column;
    width: 75%;
    margin: 20px;
}

.cart-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    
}

.cart-quantity input {
    border: none;
    appearance: none;
    background: #FFF4F0;
    padding: 12px;
    border-radius: 10px;
    width: 100px;
}

.container {
    position: relative;
    width: 80px;
    height: 50px;
    border-radius: 40px;
    border: 2px solid;
    transition: 0.5s;
}

.container .next{
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #FFF4F0;
    border-left: 2px solid #FFF4F0;
    z-index: 1;
    transform: translateY(-50%) rotate(135deg);
    cursor: pointer;
}

.container .prev{
    position: absolute;
    top: 50%;
    left: 10px;
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #FFF4F0;
    border-left: 2px solid #FFF4F0;
    z-index: 1;
    transform: translateY(-50%) rotate(315deg);
    cursor: pointer;
}

#box span{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 46px;
    color:#FFF4F0;
    font-size: 24px;
    font-weight: 700;
    user-select: none;
}

.cart-item-image {
   border-radius: 20px;
}

.shopping-cart h5{
    letter-spacing: 5px;
}

.shopping-cart {
    position:absolute;
  right: 0px;
  height: 93vh;
  top:7vh;
  background-color: #FED9CB;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
  overflow: auto;
}

.nav-active {
    transform: translateX(0%);
}

/*Phone Screen */


@media only screen and (max-width: 780px) {
    .shopping-cart {
        width: 50%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <link rel="stylesheet" href="./style.css" />
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abel&family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,200&display=swap" rel="stylesheet">
<title>Store</title>
</head>
<body>
    <script type="text/babel" src="./index.js" async></script>

    <header class="flex-container">
        <img src="./photos/logo.png" id="logo"/>
            <div class="nav">
                 <a href="#feature" id="btn"><i class="material-icons">home</i></a>
                <a id="cart-btn"><i id="cart" class="material-icons">shopping_cart</i></a>
            </div>
            <div class="shopping-cart">
                <h5>Cart</h5>
                <div class="cart-items">
                </div>
                <div class="cart-total">
                    <strong class="cart-total-title">Total</strong>
                    <span class="cart-total-price">$0</span>
                </div>
                <button class="bt bt-purchase" type="button">PURCHASE</button>
            </div>
        </header>

        <main>
            <div id="feature" class="flex-container">
                <div class="content">
                    <h3>EVERMAY</h3>
                </div>
            </div>

            <div id="store" class="flex-container">
                <h3>ITEMS</h3>
                 <div class="flex-container" id="items">
                    <div class="item">
                        <img class="shop-item-image" src="./photos/IMG1.JPG" />
                        <div class="store-info">
                            <span class="shop-item-title">DAILY REMINDER</span>
                            <p class="shop-item-price">$9.99</p>
                            <button class="bt add-item-button">+</button>
                        </div>
                    </div>
                    <div class="item">
                        <img class="shop-item-image" src="./photos/IMG2.JPG" />
                        <div class="store-info">
                            <span class="shop-item-title">CHECKERED</span>
                            <p class="shop-item-price">$4.99</p>
                            <button class="bt add-item-button">+</button>
                        </div>
                    </div>
                    <div class="item">
                        <img class="shop-item-image" src="./photos/IMG3.JPG" />
                        <div class="store-info">
                            <span class="shop-item-title">LA LUNE</span>
                            <p class="shop-item-price">$12.99</p>
                            <button class="bt add-item-button">+</button>
                        </div>
                    </div>
                    <div class="item">
                        <img class="shop-item-image" src="./photos/IMG4.JPG" />
                        <div class="store-info">
                            <span class="shop-item-title">LE SOLEIL</span>
                            <p class="shop-item-price">$5.95</p>
                            <button class="bt add-item-button">+</button>
                        </div>
                    </div>
                    
                    <div class="item">
                        <img class="shop-item-image" src="./photos/IMG5.JPG" />
                        <div class="store-info">
                            <span class="shop-item-title">ABSTRACT OCEAN</span>
                            <p class="shop-item-price">$7.50</p>
                            <button class="bt add-item-button">+</button>
                        </div>
                    </div>
                    <div class="item">
                        <img class="shop-item-image" src="./photos/IMG6.JPG" />
                        <div class="store-info">
                            <span class="shop-item-title">GARDEN</span>
                            <p class="shop-item-price">$10.25</p>
                            <button class="bt add-item-button">+</button>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>

<footer class="flex-container" id="footer">
        <h5>CONTACT</h5>
        <P>Evermay@gmail.com</P>
        <p>(111) 111-1111</p>
        </footer>
        

</body>
</html>