Scrolling overflow without hiding content

Question

I am trying to create a “slider” where the user can scroll horizontally to go to certain “slider elements”. However, I am trying to create this using pure css; I can not get it to work correctly.

Start:

End:

Ok, let me explain the photos a bit. Everything inside the "window" is visible. It also means overflow from an unordered list. I want the user to be able to scroll horizontally inside the container to move an unordered list. But; I cannot use overflow: hiddeneither overflow: scrollin the container, as it will hide all overflowing contents, which I do not want.

How can I achieve this or can it be achieved using pure CSS?

: https://jsfiddle.net/f0exzxkw/2/

Answer 1

( /):

html, body {
  margin: 0;
  padding: 0;
  background: #12969D;
}

.container {
  height: 90vh;
  width: 90vw;
  padding: 40px 0;
  box-sizing: border-box;
  border: 1px solid black;
  background: #6B00BE;
  margin: 5vh auto;
}

ul {
  height: 100%;
  width: calc(100% + 75px);
  padding: 0;
  background: #FFBD37;
  list-style-type: none;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space:nowrap;
}

li {
  padding: 10px;
  display: inline-block;
  background: #FFD787;
  height: 100%;
  width: 50vw;
  border: 1px solid black;
}

<div class="container">
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
</div>

Answer 2

:

HTML

<div id="project-slider">
   <div class="container">
      <ul class="items-holder">
         <li class="item" style="background: blue;"></li>
         <li class="item" style="background: red;"></li>
         <li class="item" style="background: green;"></li>
      </div>
   </div>
</div>

<div>
  <p>
    Just to show that currently the window is scrolling instead of the container.
  </p>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  background: #12969D;
}

.container {
  height: 90vh;
  width: 90vw;
  padding: 40px 0;
  box-sizing: border-box;
  border: 1px solid black;
  background: #6B00BE;
  margin: 5vh auto;
}

ul {
  height: 100%;
  width: calc(100% + 75px);
  padding: 0;
  background: #FFBD37;
  list-style-type: none;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space:nowrap;
}

li {
  padding: 10px;
  display: inline-block;
  background: #FFD787;
  height: 100%;
  width: 50vw;
  border: 1px solid black;
}

Answer 3

The idea is to set the background to a fixed element and place it on top of it.

Jsfiddle example

body {
  background: teal;
  margin: 0;
}
.background {
  background: purple;
  width: 80vw;
  height: 80vh;
  position: fixed;
  left: 10vw;
  top: 10vh;
}
.scrollable {
  list-style-type: none;
  position: relative;
  display: flex;
  padding: 0;
  margin: 20vh 0 0 10vw;
  height: 60vh;
}
.scrollable li {
  padding: 10px;
  background: orange;
  height: 100%;
  flex: 0 0 50vw;
  border: 1px solid darkorange;
  box-sizing: border-box;
}

<div class="background"></div>
<ul class="scrollable">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Run code