如何在html中隐藏滚动条？

我想隐藏滚动条，但在同样的情况下，我也想要滚动动作，例如我想隐藏滚动条，但仍然希望滚动以查看其余内容而不实际看到滚动条。如何在html中隐藏滚动条？

overflow: hidden将无法正常工作，因为使用后我无法滚动查看内容。

如何使用HTML/CSS/javascript？

我正在使用造型滚动条，但我注意到没有定义明确的滚动条样式，所以我用jQuery制作了使用div的自定义滚动条，但最后我有两个滚动条，其中一个是我制作的默认滚动条，现在我想隐藏默认滚动条。

我不想使用-webkit-，因为它在所有浏览器中都不被接受。

我想在下面的代码中隐藏滚动条。

\t \t .container{ 
 
    width: 100%; 
 
    background-color: #d5d5d5; 
 
} 
 
.sidebarcontainer{ 
 
    width: 300PX; 
 
    height: 6000px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    padding-right: 2px; 
 
} 
 
.innersidebarcontainer{ 
 
    position: relative; 
 
     width: 100%; 
 
    height: 100%; 
 
} 
 
.sidebar{ 
 
    width: 300px; 
 
    background-color: teal; 
 
    height: 2000px; 
 
    top: 1px; 
 
    position: absolute; 
 
} 
 
.mainpage{ 
 
    width: calc(100% - 300px); 
 
    padding: 5px; 
 
    padding-right: 2px; 
 
    height: 6000px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 
.page{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: white; 
 
} 
 
.footer{ 
 
    height: 500px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: purple 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="sidebarcontainer"> 
 
     <div class="innersidebarcontainer"> 
 
     <div class="sidebar"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="mainpage"> 
 
     <div class="page"></div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"></div> 
 
</body>

请人解答！

来源

2017-07-29 Rahul

可能重复[隐藏滚动条，但仍然可以滚动]（https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll） –

或者这是你想要的？ https://stackoverflow.com/questions/20447384/cant-hide-scrollbar-when-using-overflow-auto – Dennis

并溢出：auto;是不是有问题？

如果你不需要，但不会显示，如果你不需要，但是当你这样做时显示。

来源

2017-07-29 16:49:29 Dennis

您需要添加以下样式：

#parent { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#child { 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    padding-right: 17px; 
}

这里是工作提琴：http://jsfiddle.net/5GCsJ/954/

来源

2017-07-29 16:49:51

你能否提供与我的代码相关的解决方案？ – Rahul

试试这个：

yourDiv::-webkit-scrollbar{ 
    width: 0px; 
}

来源

2017-07-29 16:52:15

仅适用于基于webkit的浏览器 – Vivick

让你的滚动条透明。您可以通过以下代码来完成此操作。

::-webkit-scrollbar 
    { 
     width:0px; 
    } 
    ::-webkit-scrollbar-track-piece 
    { 
     background-color: transparent; 
    }

希望这会帮助你！

来源

2017-07-29 16:54:33

如何在html中隐藏滚动条？

回答

相关问题