overflow:scroll; property is not providing enough scroll depth

Question

CSS overflow:scroll; property doesn't provide large scrolling depth. Unable to see the hidden data as scrollbar doesn't scroll enough.

My github link for the code is below. https://github.com/krishnasai3cks/portfolio

let list = [{
        technology: "Responsive Web Design",
        projects: [{
                prolink: "https://codepen.io/tznqeyiq/full/wvMxPOb",
                paragraph: "Tribute page",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/full/wvMxpjM",
                paragraph: "Form",
                website: "freecodecamp.org",
            },

            {
                prolink: "https://codepen.io/tznqeyiq/full/XWXBEVd",
                paragraph: "Product Landing",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/full/rNxZQeE",
                paragraph: "Technical Documentation",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/full/LYGJqEM",
                paragraph: "Personal portfolio",
                website: "freecodecamp.org",
            },

            {
                prolink: "https://krishnamoviewebsite.000webhostapp.com/",
                paragraph: "365 Enterntainment",
                website: "internships.suvenconsultants.com",
            },
        ],
    },
    {
        technology: "Front End Libraries",
        projects: [{
                prolink: "https://codepen.io/tznqeyiq/full/bGEJQvN",
                paragraph: "Random Quote Machine",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/pen/oNbRWOW?editors=1111",
                paragraph: "Markdown Previewer",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/pen/LYGojBK?editors=1111",
                paragraph: "Drum Machine",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/pen/OJMYYOO?editors=0010",
                paragraph: "Calculator",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/pen/qBbzpLg?editors=0010",
                paragraph: "Pomodoro Clock",
                website: "freecodecamp.org",
            },
        ],
    },
    {
        technology: "Data Visualization",
        projects: [{
                prolink: "https://codepen.io/tznqeyiq/pen/VweoxzG?editors=0011",
                paragraph: "Bar Chart",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/pen/eYJqwYX?editors=1111",
                paragraph: "Scatterplot Graph",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/full/gOrYZVN",
                paragraph: "Heat Map",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/full/oNxvrRB",
                paragraph: "Choropleth Map",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://codepen.io/tznqeyiq/full/dyMyVxx",
                paragraph: "Treemap",
                website: "freecodecamp.org",
            },
        ],
    },
    {
        technology: "APIs and Microservices",
        projects: [{
                prolink: "https://timestamp-microservice.krishnasai4.repl.co/",
                paragraph: "Timestamp Microservice",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://header-parser.krishnasai4.repl.co/",
                paragraph: "Request Header parser",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://spiritual-sunrise-okra.glitch.me/",
                paragraph: "Url Shortener",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://exercisetracker.krishnasai4.repl.co/",
                paragraph: "Exercise Tracker",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://filemetadata.krishnasai4.repl.co/",
                paragraph: "File Metadata",
                website: "freecodecamp.org",
            },
        ],
    },
    {
        technology: "Quality Assurance",
        projects: [{
                prolink: "https://rogue-plume-bug.glitch.me/",
                paragraph: "Metric/Imperial",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://rhetorical-hurricane-rugby.glitch.me/",
                paragraph: "Issue Tracker",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://hilarious-aromatic-sovereign.glitch.me/",
                paragraph: "Personal Library",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://indecisive-lofty-network.glitch.me/",
                paragraph: "Sudoku Solver",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://cuboid-working-onyx.glitch.me/",
                paragraph: "American British Translator",
                website: "freecodecamp.org",
            },
        ],
    },
    {
        technology: "Scientific Computing with Python",
        projects: [{
                prolink: "https://growingneglectedstrategies.krishnasai4.repl.run/",
                paragraph: "Arithmetic Formatter",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://fcc-time-calculator.krishnasai4.repl.run/",
                paragraph: "Time Calculator",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://fcc-budget-app.krishnasai4.repl.run/",
                paragraph: "Budget App",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://fcc-shape-calculator.krishnasai4.repl.run/",
                paragraph: "Ploygon Area Calculator",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://fcc-probability-calculator.krishnasai4.repl.run/",
                paragraph: "Probability Calculator",
                website: "freecodecamp.org",
            },
        ],
    },
    {
        technology: "Data Analysis with Python",
        projects: [{
                prolink: "https://juvenileflawlessentropy.krishnasai4.repl.run/",
                paragraph: "M/V/STD calculator",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://flatemotionalnumber.krishnasai4.repl.run/",
                paragraph: "Demographic Data analysis",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://giantcoldtab.krishnasai4.repl.run/",
                paragraph: "Medical Data Visualizer",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://activebelatedrate.krishnasai4.repl.run/",
                paragraph: "Page View Time Series",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://informalbigoolanguage.krishnasai4.repl.run/",
                paragraph: "Sea Level Predictor",
                website: "freecodecamp.org",
            },
        ],
    },
    {
        technology: "Information Security",
        projects: [{
                prolink: "https://agreeable-busy-volleyball.glitch.me/",
                paragraph: "Stock Price Checker",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://fluff-wooded-calculator.glitch.me/",
                paragraph: "Anonymous Message Board",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://fcc-port-scanner.krishnasai4.repl.run/",
                paragraph: "Port Scanner",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://fcc-brute-force-password-cracker.krishnasai4.repl.run/",
                paragraph: "SHA-1 password",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://boilerplate-project-secure-real-time-multiplayer-game.krishnasai4.repl.co/",
                paragraph: "Real Time Multiplayer",
                website: "freecodecamp.org",
            },
        ],
    },
    {
        technology: "Machine Learning with Python",
        projects: [{
                prolink: "https://repl.it/repls/KindheartedMonumentalScientist",
                paragraph: "Rock Paper Scissors",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://colab.research.google.com/drive/112bLjBaxkKnLqZJdH51ca8frNnBK0JWm?usp=sharing",
                paragraph: "Cat and Dog Image Classifier",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://colab.research.google.com/drive/1pJKE0Rkm1n0togybbFuNc7MAlywD-Oee?usp=sharing",
                paragraph: "Book recommendation",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://colab.research.google.com/drive/1mSu9Itt7ICIBrwipcvIsEECT7vrH1mKF?usp=sharing",
                paragraph: "Health Costs Calculator",
                website: "freecodecamp.org",
            },
            {
                prolink: "https://colab.research.google.com/drive/1FAkph2u2EM9n9rj9PjBQvQDa_t3IGfJX?usp=sharing",
                paragraph: "SMS Text Classifier",
                website: "freecodecamp.org",
            },
        ],
    },
    {
        technology: "Python/Django",
        projects: [{
                prolink: "https://blog-project-krishna.herokuapp.com/",
                paragraph: "Blog Application",
                website: "internship.suvenconsultants.com",
            },
            {
                prolink: "https://shopping-cart-krishna.herokuapp.com/",
                paragraph: "Online Shop",
                website: "internship.suvenconsultants.com",
            },

            {
                prolink: "https://social-website-krishna.herokuapp.com/",
                paragraph: "Social Website",
                website: "internship.suvenconsultants.com",
            },
            {
                prolink: "https://krishna-e-learning-platform.herokuapp.com/",
                paragraph: "E-Learning Platform",
                website: "internship.suvenconsultants.com",
            },
        ],
    },
];
let projects_grid = document.getElementById("projects-grid");
const all_projects = [
    "Front End Libraries",
    "Data Visualization",
    "APIs and Microservices",
    "Quality Assurance",
    "Scientific Computing with Python",
    "Data Analysis with Python",
    "Information Security",
    "Machine Learning with Python",
    "Responsive Web Design",
];
let project_types = {
    All: all_projects,
    Html_CSS_JS: ["Responsive Web Design"],
    React_JS: ["Front End Libraries"],
    Data_Analysis: ["Data Visualization", "Data Analysis with Python"],
    Python_DA_ML: [
        "Data Analysis with Python",
        "Machine Learning with Python",
        "Scientific Computing with Python",
        "Information Security",
    ],
    Node_JS: ["Quality Assurance", "APIs and Microservices"],
};
// The List is coming from ./projects.js file
let htmlResult = "";
for (let i = 0; i < list.length; i++) {
    let { technology } = list[i];
    htmlResult += `
    <div class="project-type" id="${technology}">
    <h1>${technology}</h1>
    `;
    for (let j = 0; j < list[i]["projects"].length; j++) {
        htmlResult += `
      <div class="project">
      <a href="${list[i]["projects"][j]["prolink"]}" target="_blank">
        ${list[i]["projects"][j]["paragraph"]}
      </a>
      </div>
      `;
    }
    htmlResult += `
    </div>`;
}
projects_grid.innerHTML = htmlResult;

function changeProjects(target) {
    let { value } = target;
    all_projects.forEach(
        (project) => (document.getElementById(project).style.display = "none")
    );
    project_types[value].forEach(
        (project) =>
        (document.getElementById(project).style.display = "inline-block")
    );
}

function submitHandler() {
    let name = document.getElementById("name");
    let body = document.getElementById("body");
    let value = `
  name:${name.value}
  ${body.value}`;
    window.location.href =
        "mailto:[email protected]?subject=Portfolio Feedback&body=" + value;
}
let skillsContainer = document.getElementById("skills-list");

let skills = [
    ["html5", 90],
    ["css3", 80],
    ["js", 90],
    ["react", 70],
    ["node-js", 80],
    ["python", 80],
    ["php", 60],
    ["database", 60, "mongodb"],
    ["database", 70, "mysql"],
];
let innerHTML = "<table style='width:100%;'>";
skills.forEach((data) => {
    let classStyle = data[2] ? "fa fa-database " + data[2] : "fab fa-" + data[0];
    let name = data[2] ? data[2] : data[0];
    console.log(classStyle);
    innerHTML += `
        <tr>
        <td>
        <span class="skills-icon">
            <i class="${classStyle}"></i>
        </span>
        </td>
        <td>
        <span class="skill-name" style="font-weight:bold;">${name}</span>
        </td>
        <td >
        <div class="bar" style="width:${data[1]}%"></div>
        <abbr>${data[1]}%</abbr>
        </td>

        <tr>
    `;
});
innerHTML += "</table>";
skillsContainer.innerHTML = innerHTML;
/*
<div><span class="skills-icon">
<i class="fab fa-css3" style="color:blue;"></i></span>
    <div class="bar"></div>
</div>
<div><span class="skills-icon"><i class="fab fa-html5" style="color:red;"></i></span></div>
<div><span class="skills-icon"><i class="fab fa-js" style="color:rgb(240, 193, 76);"></i></span></div>
<div><span class="skills-icon"><i class="fab fa-python"></i></span></div>
<div><span class="skills-icon"><i class="fab fa-php" style="color:black;"></i></span></div>
<div><span class="skills-icon"><i class="fab fa-react" style="color:blue;"></i></span></div>
*/

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

 ::-webkit-scrollbar-thumb {
    background: #888;
}

 ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

:root {
    --lightblue: rgb(116, 116, 196);
    --lightpinkish: rgb(240, 174, 240, 1);
    --darkerpinkish: rgb(243, 134, 243);
    --whitish: rgb(226, 232, 240);
    --lightred: rgb(238, 215, 215);
}

select {
    padding: 5px 35px 5px 5px;
    font-size: 16px;
    background-color: var(--whitish);
    border-radius: 5px;
    font-weight: bold;
}

select:hover {
    box-shadow: 0.1px 0.1px 5px var(--lightpinkish);
}

select::selection {
    border: 0px;
}

body {
    background-color: var(--whitish);
    font-family: 'Lato', sans-serif;
    margin: 0;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

nav {
    background-color: var(--lightblue);
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

nav a {
    color: #fff;
    position: relative;
    margin-left: 30px;
}

nav a::after {
    content: '';
    border-bottom: 3px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: translateY(10px);
    transition: transform 0.3s ease;
    opacity: 0;
}

nav a:hover::after {
    border-bottom: 3px solid #fff;
    transform: translateY(0);
    opacity: 1;
}

header {
    height: 80vh;
    background-color: var(--lightpinkish);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-position: center center;
    position: relative;
}

.intro {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.photo {
    height: 100%;
}

header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.7;
}

header * {
    position: relative;
    z-index: 1;
}

header h1 {
    font-size: 60px;
    margin-bottom: 5px;
    margin-top: 0;
}

header p {
    font-size: 30px;
    margin: 0;
}

.skill-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fa-python {
    background: -webkit-linear-gradient(bottom right, yellow, yellow, blue, blue);
    background-clip: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fa-html5 {
    color: red;
}

.fa-css3 {
    color: blue;
}

.fa-js {
    color: goldenrod;
}

.fa-react {
    color: skyblue
}

.fa-node-js {
    color: green;
}

.fa-php {
    color: slategray;
}

.mongodb {
    color: green;
}

.mysql {
    color: orange;
}
#skills {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.skills-icon {
    font-size: xxx-large;
}

#skills-list {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-between;
}

.bar {
    width: 500px;
    height: 10px;
    background-color: rgb(247, 113, 113);
    animation: bar infinite 3s ease;
}

td {
    width: 200px;
}

@keyframes bar {
    0% {
        width: 0;
    }
}

.projects-section {
    background-color: var(--whitish);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.projects-grid {
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 30vh;
    max-height: 50vh;
    width: 90%;
    overflow: scroll;
    overflow-x: hidden;
}

.project {
    height: 30px;
}

.project a {
    color: var(--lightblue);
}

.contact-section {
    width: 100vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--lightblue);
    color: white;
}

.contact-links {
    display: flex;
}

.social {
    font-size: xx-large;
    color: var(--lightred);
    margin-right: 2px;
}

#email {
    background-color: var(--lightblue);
    color: white;
    width: 500px;
    height: 90%;
    margin-bottom: 5px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#email form {
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#submit {
    margin-top: 5px;
    width: 90%;
    border: 0px;
    border-radius: 5px;
    background-color: var(--lightblue);
    color: white;
    font-size: larger;
    font-weight: bold;
    cursor: pointer;
}

#submit:hover {
    box-shadow: none;
}

#emailbody {
    width: 90%;
    height: 50%;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
    border-radius: 5px;
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <!-- partial:index.partial.html -->
    <nav id=" navbar">
        <a href="#">Krishna</a>
        <div>
            <a href="#welcome-section">About</a>
            <a href="#skills">Skills</a>
            <a href="#projects">Work</a>
            <a href="#contact">Contact</a></div>
    </nav>

    <header id="welcome-section">
        <div class="intro">
            <h1>Hi... I am Krishna</h1>
            <p>A full stack development enthusiast</p>
        </div>
        <a class="photo" href="https://www.linkedin.com/in/krishnasai3cks" target="_blank">
            <img class="photo" src="./images/krishna.jpeg" alt="" srcset="">
        </a>
    </header>

    <section id="skills">
        <div>
            <h1>Skills</h1>
        </div>
        <div id="skills-list">
            <script src="scripts/skills.js"></script>
        </div>
    </section>
    <section id="projects" class="projects-section">
        <h1>These are some of my projects</h1>
        <select name="technology" id="selector" onchange="changeProjects(this)">
                <option>All</option>
                <option>Html_CSS_JS</option>
                <option>React_JS</option>
                <option>Node_JS</option>
                <option>Data_Analysis</option>
                <option>Python_DA_ML</option>
            </select>
        <div class="projects-grid" id="projects-grid">
        </div>
    </section>
    <section id="contact" class="contact-section">
        <div>
            <h1>Contact:</h1>
        </div>
        <div id="email">
            <form action="mailto:[email protected]?subject=portfolio feedback" method="get" enctype="multipart/form-data">
                <span style="width:90%;">Email body:</span>
                <textarea id="emailbody" rows="6" cols="20" name="body"></textarea>
                <input id='submit' type="submit" value="Submit">
            </form>
        </div>
    </section>

    <footer>
        <span style="margin-left:5px;">Made by Krishna Sai with <i class="fas fa-heart" style="color:red;"></i></span>

        <div class="contact-links">
            <div>
                <a href="https://www.linkedin.com/in/krishnasai3cks/" target="_blank">
                    <i class="fab fa-linkedin social"></i>
                </a>
            </div>
            <div>
                <a id="profile-link" href="https://github.com/Krishnasai3cks" target="_blank">
                    <i class="fab fa-github social"></i>
                </a>
            </div>
            <div>
                <a id="profile-link" href="https://codepen.io/tznqeyiq" target="_blank">
                    <i class="fab fa-codepen social"></i>
                </a>
            </div>
        </div>
    </footer>

As you can see in the following snippet. the projects section has some projects hidden. I used css overflow:scroll; property I guess there is a limit of how much you can scroll.

Is there any solution to be able to get infinite scrolling depth?

Nick · Accepted Answer · 2021-01-13 07:36:34Z

1

Removing the display: flex property from this class will fix it.

.projects-grid {
    min-height: 30vh;
    max-height: 50vh;
    width: 90%;
    overflow: scroll;
    overflow-x: hidden;
}

I assume you still want to use display: flex to use the justify-content or align-items to align your projects. If you want to do that consider wrapping another <div> around your projects and add the flex property there.

answered Jan 13, 2021 at 7:36

Nick

767 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

overflow:scroll; property is not providing enough scroll depth

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related