How to prevent overscrolling problem with webpage

Question

I am facing a problem where my simple HTML page (with some album covers on the left and a user list on the right like Spotify) over scrolls. I have tried all options with the overscroll-behavior property with no luck.

It works fine with just the album covers or the user list. It starts over scrolling as soon as I add both.

body {
    font-family: '';
    background-color: #000000;
    width: 600px;
    margin: auto;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    padding: 10px;
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* from https://stackoverflow.com/questions/17756649/disable-the-horizontal-scroll --> to
    disable horizontal scroll/page moving from left to right*/
    max-width: 100%;
    overflow-x: hidden;
}

/* top part/beginning of webpage */

#user {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: medium;
    color: #0cb004;
    font-style: italic;
    position: relative;
    right: 400px;
}

#welcome {
    font-family: Impact, Haettenschweiler, 'Impact', sans-serif;
    color: #0cb004;
    letter-spacing: 2px;
    font-weight: lighter;
    text-align: left;
    position: relative; right: 400px; 
}


#logo-text {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    position: relative;
    top: -200px;
    left: 600px;
    font-size: smaller;
}

#fake-logo {
    position: relative;
    top: -245px;
    left: 980px;
    width: 40px;
}

#search-bar {
    font-family: 'Trebuchet MS', sans-serif;
    border-radius: 25px;
    background-color: white;
    padding: 8px;
    width: 500px;
    height: 20px; 
    position: relative; top: -90px; left: 520px;
}

/* divider */

#first-divider {
    border-top: 5px solid white;
    border-radius: 5px;
    position: relative;
    top: -25px;
}

/* h2s - start being used here (all h2s share some features in common) */

.h2 {
    color: white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 30px;
    font-weight: lighter;
}

/* friend activity on the right side */

#friends-list {
    position: relative;
    top: -70px;
    left: 800px;
}

/* classes used to eliminate redundancy in code - all friend list elements share some features in common */

.username {
    color: #0cb004;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
}

.activity {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 11px;
}

#first-friend-name {
    position: relative;
    top: -50px;
    left: 800px;
}

#first-friend-activity {
    position: relative;
    top: -50px;
    left: 800px;
}

#second-friend-name {
    position: relative;
    top: -30px;
    left: 800px;
}

#second-friend-activity {
    position: relative;
    top: -30px;
    left: 800px;
}

#third-friend-name {
    position: relative;
    top: -10px;
    left: 800px;
}

#third-friend-activity {
    position: relative;
    top: -10px;
    left: 800px;
}

#fourth-friend-name {
    position: relative;
    top: 10px;
    left: 800px;
}

#fourth-friend-activity {
    position: relative;
    top: 10px;
    left: 800px;
}

#fifth-friend-name {
    position: relative;
    top: 30px;
    left: 800px;
}

#fifth-friend-activity {
    position: relative;
    top: 30px;
    left: 800px;
}

#sixth-friend-name {
    color: gray;
    position: relative;
    top: 50px;
    left: 800px;
}

#sixth-friend-activity {
    position: relative;
    top: 50px;
    left: 800px;
}

#seventh-friend-name {
    color: gray;
    position: relative;
    top: 70px;
    left: 800px;
}

#seventh-friend-activity {
    position: relative;
    top: 70px;
    left: 800px;
}

#eighth-friend-name {
    color: gray;
    position: relative;
    top: 90px;
    left: 800px;
}

#eighth-friend-activity {
    position: relative;
    top: 90px;
    left: 800px;
}

#ninth-friend-name {
    color: gray;
    position: relative;
    top: 110px;
    left: 800px;
}

#ninth-friend-activity {
    position: relative;
    top: 110px;
    left: 800px;
}

/* first listening section - "Jump Back In..." */

#first-header {
    position: relative; 
    top: -820px; 
    right: 400px;
}

/* classes used to eliminate redundancy in code - all playlist elements share some features in common */

.playlist-name {
    color: #0cb004;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 17px;
}

.playlist-description {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

.playlist-picture {
    width: 200px;
    height: 200px;
}

#playlist-one-pic {
    position: relative;
    top: -800px;
    right: 400px;
}

#playlist-one-name {
    position: relative;
    top: -810px;
    right: 400px;
}

#playlist-one-description {
    position: relative;
    top: -820px;
    right: 400px;
}

#playlist-one-play-button {
    width: 50px;
    position: relative;
    top: -1100px;
    right: 400px;
}

#playlist-two-pic {
    position: relative;
    top: -1100px;
    right: 75px;
}

#playlist-two-name {
    position: relative;
    top: -1110px;
    right: 22px;
}

#playlist-two-description {
    position: relative;
    top: -1120px;
    right: 22px;
}

#playlist-two-play-button {
    width: 50px;
    position: relative;
    top: -1415px;
    right: 22px;
}

#playlist-three-pic {
    position: relative;
    top: -1415px;
    left: 290px;
}

#playlist-three-name {
    position: relative;
    top: -1425px;
    left: 340px;
}

#playlist-three-description {
    position: relative;
    top: -1435px;
    left: 340px;
}

#playlist-three-play-button {
    width: 50px;
    position: relative;
    top: -1560px;
    left: 345px;
}

/* divider */
/* peer feedback from in-class 9/23 - changed position of divider so it was
more centered between content */

#second-divider {
    border-top: 5px solid white;
    border-radius: 5px;
    position: relative;
    top: -1400px;
}

/* second listening section - "Trending Albums For You" */

#second-header {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    position: relative; 
    top: -1350px; 
    right: 400px;
}

/* classes used to eliminate redundancy in code - all album elements share some features in common */
.album-cover {
    width: 200px;
    height: 200px;
}

.album-name {
    color: #0cb004;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.album-description {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
}

#first-album-cover {
    position: relative;
    top: -1320px;
    right: 400px;
}

#first-album-name {
    position: relative;
    top: -1320px;
    right: 400px;
}

#first-album-description {
    position: relative;
    top: -1330px;
    right: 400px;
}

#album-one-play-button {
    width: 50px;
    position: relative;
    top: -1610px;
    left: -400px;
}

#second-album-cover {
    position: relative;
    top: -1310px;
    right: 450px;
}

#second-album-name {
    position: relative;
    top: -1315px;
    right: 400px;
}

#second-album-description {
    position: relative;
    top: -1325px;
    right: 400px;
}

#album-two-play-button {
    width: 50px;
    position: relative;
    top: -1595px;
    right: 395px;
}

#third-album-cover {
    position: relative;
    top: -1890px;
}

#third-album-name {
    position: relative;
    top: -1895px;
    right: -53px;
}

#third-album-description {
    position: relative;
    top: -1905px;
    right: -55px;
}


#album-three-play-button {
    width: 50px;
    position: relative;
    top: -2173px;
    right: -50px;
}

#fourth-album-cover {
    position: relative;
    top: -1880px;
}

#fourth-album-name {
    position: relative;
    top: -1885px;
    right: -53px;
}

#fourth-album-description {
    position: relative;
    top: -1895px;
    right: -55px;
}


#album-four-play-button {
    width: 50px;
    position: relative;
    top: -2163px;
    right: -50px;
}

#fifth-album-cover {
    position: relative;
    top: -2300px;
    left: 405px;
}

#fifth-album-name {
    position: relative;
    top: -2305px;
    left: 458px;
}

#fifth-album-description {
    position: relative;
    top: -2315px;
    left: 458px;
}


#album-five-play-button {
    width: 50px;
    position: relative;
    top: -2430px;
    left: 457px;
}

/* divider */
#third-divider {
    border-top: 5px solid white;
    border-radius: 5px;
    position: relative;
    top: -2200px;
}

#div-1 {
    height: min-content;
}


/* see more button at bottom of website */
#see-more {
    position: relative;
    top: -2200px;
    left: 230px;
    text-decoration: underline;
    color: #0cb004;
}

<!DOCTYPE html>

<html lang="en">

<!--head -> title of page Music Player™ and linking CSS to HTML-->
<head>

    <title>Music Player™</title>
    <link rel="stylesheet" type="text/css" href="../static/style.css"/>

</head>

<!-- start of body -->
<body>

    <!-- h1s - states user and gives welcome message-->
    <h1 id = "user">@USER Me! -- ONLINE!</h1>
    <h1 id = "welcome"> Good Morning. What would you like to listen to today?</h1>

    <!-- creates search bar-->
    <p id="search-bar">Search artists, playlists, albums, and more...</p>

    <!-- first divider (use CSS to make it rounded), placed here for formatting-->
    <hr id="first-divider">

    <!-- creates fake logo and slogan in top right-->
    <p id="logo-text">The premier music playing software... Music Player™!</p>
    <img src = "static/fakespotifylogo.png" id = "fake-logo">

    
    <!-- creates friend activity feature on the right side; there is a username - belongs to class username -
        and their activity - belongs to class activity - for each person-->
    <h2 class = "h2" id = "friends-list">Friend Activity</h2>

    <p class = "username" id = "first-friend-name">@user1 -- ONLINE!</p>
    <p class = "activity" id = "first-friend-activity">Love Him I Don't ● Maisie Peters <br> ♫ You Signed 
        Up For This</p>

    <p class = "username" id = "second-friend-name">@user12 -- ONLINE!</p>
    <p class = "activity" id = "second-friend-activity">RUNNING OUT OF TIME ● Tyler, <br> The Creator <br> ♫ IGOR </p>

    <p class = "username" id = "third-friend-name">@user13 -- ONLINE!</p>
    <p class = "activity" id = "third-friend-activity">Lucid Dream ● aespa <br> ♫ Savage </p>

    <p class = "username" id = "fourth-friend-name">@user14 -- ONLINE!</p>
    <p class = "activity" id = "fourth-friend-activity">Can I Call You Tonight? ● Dayglow <br> ♫ Fuzzybrain </p>

    <p class = "username" id = "fifth-friend-name">@user120 -- ONLINE!</p>
    <p class = "activity" id = "fifth-friend-activity">Wrong Decisions ● NAV <br> ♫ Demons Protected by Angels</p>

    <p class = "username" id = "sixth-friend-name">@user15 :) -- OFFLINE!</p>
    <p class = "activity" id = "sixth-friend-activity">Guns and Ships ●  Original Broadway Cast <br> of Hamilton <br> 
        ♫ Hamilton (Original Broadway Cast <br> Recording)</p>

    <p class = "username" id = "seventh-friend-name">@user16 -- OFFLINE!</p>
    <p class = "activity" id = "seventh-friend-activity">Moment 4 Life ● Nicki Minaj, Drake <br> ♫ Pink Friday</p>

    <p class = "username" id = "eighth-friend-name">@user17 -- OFFLINE!</p>
    <p class = "activity" id = "eighth-friend-activity">Stitches ● Shawn Mendes <br> ♫ Handwritten </p>

    <p class = "username" id = "ninth-friend-name">@user19! - OFFLINE!</p>
    <p class = "activity" id = "ninth-friend-activity">All Too Well (10 Minute Version)<br>(Taylor's Version) ● Taylor Swift
    <br> ♫ Red (Taylor's Version) </p>
    
    <!-- new div for a new section -->
    <div>

    <!-- creates first section for listening - jump back in (to recent playlists)
    each playlist has a name, time last listened, a cover picture, and a few songs in it-->
    <h2 class = "h2" id = "first-header">Jump Back In...</h2>
    
    <img src = "static/sadkermit.jpg" class = "playlist-picture" id = "playlist-one-pic">
    <p class = "playlist-name" id = "playlist-one-name">3 am thoughts ● 1:03 AM</p>
    <p class = "playlist-description" id = "playlist-one-description">with Memories ● Conan Gray, Solo ● Frank Ocean, <br> 
        N Side ● Steve Lacy, & more
    </p>
    <img src = "static/spotifyplaybutton.png" id = "playlist-one-play-button">

    <img src = "static/kermithappy.jpg" class = "playlist-picture" id = "playlist-two-pic">
    <p class = "playlist-name" id = "playlist-two-name">serotonin!! ● 4:13 PM</p>
    <p class = "playlist-description" id = "playlist-two-description">with The Spins ● Mac Miller, Love Grows (Where <br>
        My Rosemary Grows) ● Edison Lighthouse, Ykwim? <br>
         ● Yot Club, & more 
    </p>
    <img src = "static/spotifyplaybutton.png" id = "playlist-two-play-button">

    <img src = "static/kermitstudy.jpg" class = "playlist-picture" id = "playlist-three-pic">
    <p class = "playlist-name" id = "playlist-three-name">seeking academic validation. ● 10:47 PM</p>
    <p class = "playlist-description" id = "playlist-three-description">with willow ● Taylor Swift, Je te laisserai de mots <br>
        ● Patrick Watson, astroboy. ● suggi, & more
    </p>
    <img src = "static/spotifyplaybutton.png" id = "playlist-three-play-button">

    <!-- end div for new section -->
    </div>
    
    <!-- second divider (use CSS to make it rounded), placed here for formatting-->
    <hr id = "second-divider">

    <!-- new div for a new section -->
    <div id="div-1">

    <h2 class = "h2" id="second-header">Trending Albums For You</h2>

    <!-- creates second section for listening - trending albums for you
    each album has a name, artist, year released, and number of songs-->
    <img src = "https://m.media-amazon.com/images/I/71UgVkCnalL._SL1200_.jpg" class = "album-cover" id = "first-album-cover">
    <p class = "album-name" id = "first-album-name">FOUR (Deluxe) ● One Direction</p>
    <p class = "album-description" id = "first-album-description">2014, 16 songs</p>
    <img src = "static/spotifyplaybutton.png" id = "album-one-play-button">

    <img src = "https://i.scdn.co/image/ab67616d0000b273decd839dd4fef3faf64c5fd5" class = "album-cover" id = "second-album-cover">
    <p class = "album-name" id = "second-album-name">Face The Sun ● SEVENTEEN</p>
    <p class = "album-description" id = "second-album-description">2022, 9 songs</p>
    <img src = "static/spotifyplaybutton.png" id = "album-two-play-button">

    <img src = "static/whocaresalbumcover.png" class = "album-cover" id = "third-album-cover">
    <p class = "album-name" id = "third-album-name">WHO CARES? ● Rex Orange County</p>
    <p class = "album-description" id = "third-album-description">2022, 11 songs</p>
    <img src = "static/spotifyplaybutton.png" id = "album-three-play-button">

    <img src = "https://m.media-amazon.com/images/I/81NSetbGioL._SL1500_.jpg" class = "album-cover"
    id = "fourth-album-cover">
    <p class = "album-name" id = "fourth-album-name">Hozier ● Hozier</p>
    <p class = "album-description" id = "fourth-album-description">2014, 13 songs</p>
    <img src = "static/spotifyplaybutton.png" id = "album-four-play-button">

    <img src = "https://i.scdn.co/image/ab67616d0000b273e6d118f2ad157bf0bbfb83cf" class = "album-cover" id = 
    "fifth-album-cover">
    <p class = "album-name" id = "fifth-album-name">Hello Future ● NCT DREAM</p>
    <p class = "album-description" id = "fifth-album-description">2021, 13 songs</p>
    <img src = "static/spotifyplaybutton.png" id = "album-five-play-button">

    <!-- third divider (use CSS to make it rounded), placed here for formatting-->
    <hr id = "third-divider">

    <h2 class = "h2" id = "see-more">See More...</h2>
    
    <!-- end div for new section -->
    </div>

    

</body>

</html>

You have a lot of sizing in pixels that makes it only work well for a specific screen width. Maybe add CSS for other screen sizes or size in proportionate measures like `vw` `vh` or `em` instead. — Bman70, Sep 24 '22 at 21:44
using relative positions for almost every element on the page is a horrible idea, check out flexbox or grid concepts — Karol Milewczyk, Sep 24 '22 at 21:44

Christian · Answer 1 · 2022-09-26T00:24:09.783

Create a layout but start thinking about a structure first. The layout consists of a header, a sidebar, some main content with rows or columns, and maybe also a navigation and a footer later. Read more about layouts and semantic HTML elements.

Here's an idea:

When your page structure is good, the rest will evolve, here are some tips I have learned during my journey:

Wrap your content into pieces (maybe divs with classes, sections, etc).
Only use CSS classes to style elements. Reserve IDs for Javascript.
Use good names for your classes.
You can go "mobile-first".
You can use media queries for bigger screen sizes.
You can use flexbox (which is not the easiest concept for beginners) to position elements in rows or columns.
Watch something like Kevin Powell's series about creating a website.

I included a sample media query for the new header using flexbox. The search box will move to the right and the h1 size will decrease (just resize the screen).

body {
    font-family: '';
    background-color: #000000;
    margin: auto;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    padding: 10px;
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    max-width: 100%;
    overflow-x: hidden;
}

.h2 {
    color: white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 30px;
    font-weight: lighter;
}

.user {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: medium;
    color: #0cb004;
    font-style: italic;
    position: relative;
}

.welcome {
    font-family: Impact, Haettenschweiler, 'Impact', sans-serif;
    color: #0cb004;
    letter-spacing: 2px;
    font-weight: lighter;
    text-align: left;
}


.logo-text {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    font-size: smaller;
}

.fake-logo {
    position: relative;
    width: 40px;
}

.fake-search-bar {
    font-family: 'Trebuchet MS', sans-serif;
    border-radius: 25px;
    background-color: white;
    padding: 8px;
    width: 500px;
    height: 20px; 
}

.divider {
    border-top: 5px solid white;
    border-radius: 5px;
}

.username {
    color: #0cb004;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
}

.activity {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 11px;
}

.playlist-name {
    color: #0cb004;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 17px;
}

.playlist-description {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

.playlist-picture {
    width: 200px;
    height: 200px;
}

@media (min-width: 800px) {
  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  h1 {
    font-size: 1.5em;
  }
}

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Music Player™</title>
    <link rel="stylesheet" type="text/css" href="../static/style.css"/>
</head>

<body>
    <div class="header">
        <h1 class="user">@USER Me! -- ONLINE!</h1>
        <h1 class="welcome"> Good Morning. What would you like to listen to today?</h1>
        <div class="fake-search-bar"></div>
    </div>
    

    <hr class="divider">

    <p class="logo-text">The premier music playing software... Music Player™!</p>
    <img class="fake-logo" src="https://images.complex.com/complex/images/c_fill,dpr_auto,f_auto,q_90,w_1400/fl_lossy,pg_1/mqlimq5ifprz3klcoxpt/spotify-logo">

    <div class="sidebar">
        <h2 class="friends-header">Friend Activity</h2>
        <p class="first-friend-name">@user1 -- ONLINE!</p>
        <p class="first-friend-activity">Love Him I Don't ● Maisie Peters <br> ♫ You Signed 
            Up For This</p>
    </div>
    
    <div class="main">
        <p>♫ Red (Taylor's Version) </p>
        <div>
            <p>Jump Back In...<p>
            
            <img class="playlist-picture" src="https://i.imgflip.com/1wr9we.jpg">
            <p class="playlist-name">3 am thoughts ● 1:03 AM</p>
            <p class="playlist-description">with Memories ● Conan Gray, Solo ● Frank Ocean, <br> 
                N Side ● Steve Lacy, & more
            </p>
            <img class="spotify-play-button" src="http://hypebot.typepad.com/.a/6a00d83451b36c69e201bb09b0b161970d-200wi">
        </div>
    </div>
    
    <hr class="divider">

    <div id="div-1">
        <h2>Trending Albums For You</h2>
        <img class="album-cover" src="https://m.media-amazon.com/images/I/71UgVkCnalL._SL1200_.jpg">
        <p class="album-name">FOUR (Deluxe) ● One Direction</p>
        <p> 2014, 16 songs</p>
        <img class="spotify-play-button" src="http://hypebot.typepad.com/.a/6a00d83451b36c69e201bb09b0b161970d-200wi">
        <img class="album-cover" src="https://i.scdn.co/image/ab67616d0000b273decd839dd4fef3faf64c5fd5">
        <hr class="divider">
        <p class="see-more">See More...</p>
    </div>
</body>
</html>

How to prevent overscrolling problem with webpage

1 Answers1