CODEWITHSUNDEEP
htmlcssscrolloverflow
Levano
Levano

Reputation: 319

Horizontal scroll on one child element in parent

I have a page with several sections (see code snippet or JSFiddle example).

The user should only be able to scroll vertically on the page.

Now, aside from that, I would like to horizontally scroll through only one section: the projects (without affecting the rest of the page). That means that, apart from the projects section, the rest will have to stay still.

How could I achieve this partial horizontal scroll?

.container {
  width: 500px;
  height: 100%;
  overflow-x: scroll;
  background-color: lightgrey;
  padding: 20px;
}

.projects {
  width: 960px;
}

.project {
  display: inline-block;
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
  background-color: grey;
}
<div class="container">
    <h1>Page</h1>
    <div class="main">
        <h2>Main</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="projects">
        <h2>Projects</h2>
        <div class="project">
            <p>Project</p>
        </div>
        <div class="project">
            <p>Project</p>
        </div>
        <div class="project">
            <p>Project</p>
        </div>
    </div>
</div>

Upvotes: 2

Views: 2687

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Try this.

.projects .project-inwrap  {
  width: 100%;
  white-space: nowrap;
  overflow: auto;
}


.container {
  width: 500px;
  height: 100%;
  overflow-x: scroll;
  background-color: lightgrey;
  padding: 20px;
}

.projects .project-inwrap {
  width: 100%;
  white-space: nowrap;
  overflow: auto;
}

.project {
  display: inline-block;
  width: 300px;
  margin: 0 20px 20px 0;
  background-color: grey;
}
<div class="container">
  <h1>Page</h1>
  <div class="main">
    <h2>Main</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="projects">
    <h2>Projects</h2>
    <div class="project-inwrap">
      <div class="project">
        <p>Project</p>
      </div>
      <div class="project">
        <p>Project</p>
      </div>
      <div class="project">
        <p>Project</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 6

SpaceDogCS
SpaceDogCS

Reputation: 2968

Try this

*{
  box-sizing: border-box;
}
body{
  overflow: hidden;
}

.container {
  width: 500px;
  height: 100vh;
  overflow-x: hidden;
  background-color: lightgrey;
  padding: 20px;
}

.projects {
  width: 100%;
  white-space: nowrap;
  overflow: auto;
}

.project {
  display: inline-block;
  width: 300px;
  margin: 0 20px 20px 0;
  background-color: grey;
}
<div class="container">
    <h1>Page</h1>
    <div class="main">
        <h2>Main</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="projects">
        <h2>Projects</h2>
        <div class="project">
            <p>Project</p>
        </div>
        <div class="project">
            <p>Project</p>
        </div>
        <div class="project">
            <p>Project</p>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions