Hide scroll bar, but while still being able to scroll

前端 未结 30 3463
悲哀的现实
悲哀的现实 2020-11-21 04:22

I want to be able to scroll through the whole page, but without the scrollbar being shown.

In Google Chrome it\'s:

::-webkit-scrollbar {
    display:         


        
30条回答
  •  时光取名叫无心
    2020-11-21 04:50

    This is how I do it for horizontal scroll; only CSS and works well with frameworks like Bootstrap / col-*. It only needs two extra divs and the parent with a width or max-width set:

    You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.

    .overflow-x-scroll-no-scrollbar {
        overflow: hidden;
    }
    .overflow-x-scroll-no-scrollbar div {
        overflow-x: hidden;
        margin-bottom: -17px;
        overflow-y: hidden;
        width: 100%;
    }
    .overflow-x-scroll-no-scrollbar div * {
        overflow-x: auto;
        width: 100%;
        padding-bottom: 17px;
        white-space: nowrap;
        cursor: pointer
    }
    
    /* The following classes are only here to make the example looks nicer */
    .row {
        width: 100%
    }
    .col-xs-4 {
        width: 33%;
        float: left
    }
    .col-xs-3 {
        width:25%;
        float:left
    }
    .bg-gray {
        background-color: #DDDDDD
    }
    .bg-orange {
        background-color:#FF9966
    }
    .bg-blue {
        background-color: #6699FF
    }
    .bg-orange-light{
        background-color: #FFAA88
    }
    .bg-blue-light{
        background-color: #88AAFF
    }
    
      
    Column 1
    Column 2
    Column 3
    Content 1
    This content too long for the container, so it needs to be hidden but scrollable without scrollbars
    Content 3

    Short version for lazy people:

    .overflow-x-scroll-no-scrollbar {
        overflow: hidden;
    }
    .overflow-x-scroll-no-scrollbar div {
      overflow-x: hidden;
      margin-bottom: -17px;
      overflow-y: hidden;
      width: 100%;
    }
    .overflow-x-scroll-no-scrollbar div * {
      overflow-x: auto;
      width: 100%;
      padding-bottom: 17px;
      white-space: nowrap;
      cursor:pointer
    }
    
    /* The following classes are only here to make the example looks nicer */
    .parent-style {
        width: 100px;
        background-color: #FF9966
    }
    This content too long for the container, so it needs to be hidden but scrollable without scrollbars

提交回复
热议问题