2

I am actually trying to replicate the horizontal scrolling menu you normally see in mobile apps.

I really dont understand why it shouldn't work, though to me it just would seem logical to hide the vertical scrollbar and scroll with horizontal. I know there are numerous solutions to this for hiding the vertical scrollbar, but why is it impossible to do so for the horizontal scrollbar?

Here is the snippet I have created so far that demonstrates the vertical way, but how could I modify for the horizontal way?

I did try:
overflow-y:hidden; overflow-x:scroll;

but that did not work...

I could bend it to jquery, but Iam not sure how to go about it that way, so if there is a compatible css solution, that would help me out.

.block,
.container {
  width: 250px;
  height: 250px;
}
.container {
  border: 1px solid #aaa;
  padding: 5px 0 5px 5px;
  position: relative;
  overflow: hidden;
}
.container-inner {
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .container-inner,
  .block {
    transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
  }
  .container-inner {
    right: 0;
  }
}
.block {
  padding: 10px 0px 10px 0;
}
<div class="container">
  <div class="container-inner">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec.
      <br/>
      <br/>Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam
      arcu. Morbi tristique aliquam rutrum.
      <br/>
      <br/>Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo.
      <br/>
      <br/>Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat
      bibendum erat, nec interdum urna porta sed.
      <br/>
      <br/>Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas
      cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim
      libero.
    </div>
  </div>
</div>
Krys
  • 819
  • 1
  • 21
  • 38

2 Answers2

1

To avoid having a vertical scrollbar, simply make sure the height of your content doesn't exceed the height of your container. This can be done by ensuring elements between the scrolling container and children are utilizing the maximum height (100%) instead of some hard-coded value.

overflow: auto on a container will only add a scrollbar to the child dimension that exceeds the container dimension.

Edit: Hiding horizontal scrollbars is platform specific since they will have different heights across platforms. On Mac, it's 13px so the container of your scrolling area needs to be 13px smaller to hide the scrollbar.

Example code of horizontal scrolling menu without vertical scrollbars:

http://codepen.io/tlee/pen/WGxBYA

html {
  font-size: 10px;
}
container {
  display: block;
  overflow: hidden;
  /* Height of scrollbar on Mac is 13px */
  height: calc(5rem - 13px);
}
scroll-area {
  display: block;
  /* Viewable width of component. */
  width: 400px;
  height: 5rem;
  overflow: auto;
  border: 1px solid lightgray;
}

button-menu {
  display: flex;
  margin: 0;
  padding: 0;
  width: 800px;
  height: 100%;
}

button {
  box-sizing: border-box;
  flex: 1 0 auto;
  font-size: 2rem;
  height: 100%;
  margin: 0;
  padding: 0;
}
<container>
  <scroll-area>
    <button-menu>
      <button>Apple</button>
      <button>Berkshire</button>
      <button>Chevron</button>
      <button>Deutsche Bank</button>
      <button>Exxon</button>
    </button-menu>
  </scroll-area>
</container>
ENG_ACK
  • 108
  • 2
  • 7
  • thank you. that is exactly what I do need, however it seems your example still displays the scrollbar. It should remain hidden, but still scrollable. – Krys Sep 18 '16 at 08:30
  • @Krystyna updated answer to hide horizontal scrollbar and added comment about platforms. – ENG_ACK Sep 18 '16 at 23:44
1

If you use overflow: hidden scroll bar goes away but you will not be able scroll at all, so, if you want scrollable div with a hidden scrollbar, you either need script or make its parent hide the scrollbar.

Here is how-to using non-script

.container {
  width: 250px;
  height: 220px;           /* 30px less high than inner to "hide" scroll */
  border: 1px solid #aaa;
  overflow: hidden;
}
.block,
.containerinner {
  width: 250px;
  height: 250px;
}
.containerinner {
  padding: 5px 0 5px 5px;
  position: relative;
  overflow: auto;
  overflow-y: hidden;
}
.block {
  padding: 10px 0px 10px 0;
  white-space: nowrap
}
<div class="container">
<div class="containerinner">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec.
      <br/>
      <br/>Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam
      arcu. Morbi tristique aliquam rutrum.
      <br/>
      <br/>Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo.
      <br/>
      <br/>Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat
      bibendum erat, nec interdum urna porta sed.
      <br/>
      <br/>Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas
      cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim
      libero.
    </div>
</div>
</div>

And here are 2 links showing some script samples

Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • thank you, this is really great! Two things I would like to ask, is ti possible that this is compatible with other browsers, and could I introduce the ability to scroll for a mobile say? – Krys Sep 18 '16 at 08:33
  • 1
    @Krystyna This works cross browser, and you could use [**media query's**](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to control small screen devices and have different setup's how scroll should both look and behave – Asons Sep 18 '16 at 08:38
  • wow, thank you so much! I thought it would be impossible actually, now I dont have to bother with implementing jquery. – Krys Sep 18 '16 at 08:41