0

I had a look at other stackoverflow questions which were similar but I couldn't figure it out still. How do I hide the scroll bar, but I can still scroll on that particular div if I need to. It wouldn't hide scroll bars globally, just for that specific div only.

    .test {
        position: absolute;
        height: 25px;
        width: 100px;
        padding: 0px;
        margin: 0px;
        top: 10px;
        left: 10px;
        word-wrap: break-word;
        font-family: arial;
        font-size: 10px;
        font-weight: 400;
        color: red;
        line-height: 10px;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        overflow-y: scroll;
    }
<div class="test">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<div>
Yuri
  • 89
  • 1
  • 1
  • 9
  • 1
    Possible duplicate of [Hide scroll bar, but while still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) – RaminS Jan 24 '19 at 00:48
  • @Gendarme Already tried, didnt work for me – Yuri Jan 24 '19 at 00:49
  • You want horizontal scroll? How do you imagine people scrolling horizontally without a scrollbar? – RaminS Jan 24 '19 at 00:50
  • @Gendarme I don't want a scroll bar on a specific div only. Not globally. I don't expect them to scroll on it. However, I want them to have the option to scroll if they want to (by highlighting the text, or using their mouse to get the full text). The scroll bar, ruins the design. – Yuri Jan 24 '19 at 00:52

1 Answers1

0

.test{
    position: absolute;
        height: 25px;
        width: 100px;
        padding: 0px;
        margin: 0px;
        top: 10px;
        left: 10px;
        word-wrap: break-word;
        font-family: arial;
        font-size: 10px;
        font-weight: 400;
        color: red;
        line-height: 10px;
        white-space: nowrap;
        overflow: hidden;
}

.inner{
    overflow: auto;
    padding-bottom: 30px;
}
<div class="test">
    <div class="inner">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
<div>

If you wrap the content in another div that basically hides the scrollbar in the overflow it should work fine

DGS
  • 6,015
  • 1
  • 21
  • 37