如何隐藏溢出:滚动条居中 div
How to hide overflow: scroll scrollbar in centered div
我知道这个问题有很多重复的问题,但是 none 目前为止这些都有效。
我有一个宽度未知的 div,它使用 overflow-y: scroll,但我想隐藏滚动条并使其仍然可滚动。它位于屏幕中间,我该怎么做?
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
}
<div class="content-middle">
<p>My content is here</p>
</div>
div { overflow: visible | hidden | scroll | auto | inherit }
我不确定您是否可以将其隐藏并保持滚动。我认为这会起作用。
基本上您要做的是将可滚动元素放在另一个元素中并将其绝对定位在右侧。 (负值)
然后只关注可滚动元素的内容。
body {
overflow: hidden;
}
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
position: absolute;
width: 100%;
right: -17px;
}
<div class="content-middle">
<p>My content is here</p>
</div>
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
这个作品看看这个,你可以滚动,但是看不到滚动条:)
您所要做的就是在已有的之外添加一个 div。
我知道这个问题有很多重复的问题,但是 none 目前为止这些都有效。
我有一个宽度未知的 div,它使用 overflow-y: scroll,但我想隐藏滚动条并使其仍然可滚动。它位于屏幕中间,我该怎么做?
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
}
<div class="content-middle">
<p>My content is here</p>
</div>
div { overflow: visible | hidden | scroll | auto | inherit }
我不确定您是否可以将其隐藏并保持滚动。我认为这会起作用。
基本上您要做的是将可滚动元素放在另一个元素中并将其绝对定位在右侧。 (负值)
然后只关注可滚动元素的内容。
body {
overflow: hidden;
}
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
position: absolute;
width: 100%;
right: -17px;
}
<div class="content-middle">
<p>My content is here</p>
</div>
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
这个作品看看这个,你可以滚动,但是看不到滚动条:) 您所要做的就是在已有的之外添加一个 div。