scrollable div with arrows-CodePudding

I have a menu container, with menu items within it. Problem is, there will be more items than the container can show without breaking it onto two lines. I would like to solve this by adding arrows on each end of the menu items, and be able to horizontally scroll the items with said arrows (i dont want default browser scrollbar), so it doesn't have to go down on a second row. A secondary issue is I don't need the left arrow to be visible, if you have scrolled to the left end so to speak, and vice versa on the right side.

<div >
  <span >&lt;</span>
  <span >batman</span>
  <span >superman</span>
  <span >catwoman</span>
  <span >penguin</span>
  <span >&gt;</span>
</div>

.menu{
  background-color:#cccccc;
  border:1px solid black;
  padding:3px;
  width:400px;
}

.item,.left,.right{
  border:1px solid dodgerblue;
  padding:4px;
  display:inline-block;
  background-color:#ffffff;
}

Here is a jsfiddle showing all menu items, but with both arrows.

https://jsfiddle.net/zgctdouy/

and here is a jsfiddle where the items just don't fit and break onto next line, which I dont want:

https://jsfiddle.net/p47qm0j1/1/

CodePudding user response：

This should be exactly what you want, no scrollbar on the element and the arrows scrolling the div:

const leftScrollButton = document.getElementById("left");
const rightScrollButton = document.getElementById("right");
const scrollableArea = document.getElementById("center");

function scrollLeft() {
    scrollableArea.scrollBy(50, 0);
}

function scrollRight() {
    scrollableArea.scrollBy(-50, 0);
}

leftScrollButton.addEventListener("click", scrollRight);
rightScrollButton.addEventListener("click", scrollLeft);

* {
    scroll-behavior: smooth;
}

#menu {
  border: 2px solid black;
  width: 300px;
  height: 20px;
}

#left, #right {
  width: 15px;
  height: 100%;
  background-color: rgb(210, 210, 210);
  float: left;
}

#center {
  width: 270px;
  display: flex;
  overflow-x: scroll;
  float: left;
}

#center::-webkit-scrollbar {
  width: 0;
}

.item {
  margin: 0 2px;
  background-color: rgb(210, 210, 210);
}

<div id="menu">
  <div id="left">&lt;</div>
  <div id="center">
    <div >Words</div>
    <div >Words</div>
    <div >Words</div>
    <div >Words</div>
    <div >Words</div>
    <div >Words</div>
    <div >Words</div>
    <div >Words</div>
    <div >Words</div>
    <div >Words</div>
  </div>
  <div id="right">&gt;</div>
</div>

<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>
<p>You can still see the main scrollbar!</p><br><br><br>

CodePudding user response：

Add to container.

white-space: nowrap;
overflow: auto;

.menu {
  background-color: #cccccc;
  border: 1px solid black;
  padding: 3px;
  width: 300px;
  white-space: nowrap;
  overflow: auto;
}

.item,
.left,
.right {
  border: 1px solid dodgerblue;
  padding: 4px;
  display: inline-block;
  background-color: #ffffff;
}

<div >
  <span >&lt;</span>
  <span >batman</span>
  <span >superman</span>
  <span >catwoman</span>
  <span >penguin</span>
  <span >&gt;</span>
</div>

<p>
  in this case, it should all be on one line, and the LEFT arrow should NOT be visible, whereas the RIGHT arrow should, and "penguin" should be on the same line as the others, but obviously not visible as its outside the right hand side and only reachable
  by scrolling, with the RIGHT arrow.
  <br/> Likewise, when you scroll to the end, in this case "penguin", then the LEFT arrow should be visible to be able to scroll back to the now non-visible "batman"
</p>