如何让滚动条出现在我的 DIV 上，同时在我的屏幕上居中？

Posted 2023-03-29

【中文标题】如何让滚动条出现在我的 DIV 上，同时在我的屏幕上居中？

【英文标题】：How do I get a scroll bar to appear on my DIV while at the same time centering it on my screen?

【发布时间】：2016-12-09 08:10:12

【问题描述】：

我正在设计一个无序列表，其结构是

<div class="select-styled active">Arizona</div><ul class="select-options" style="display: block;"><li rel="">Select State</li><li rel="3526">Alabama</li><li rel="3556">Alaska</li><li rel="3547">Arizona</li><li rel="3510">Arkansas</li><li rel="3542">California</li>…<li rel="3554">Wyoming</li></ul></div>

通常有比屏幕上显示的空间更多的选项，这很好 - 通常有一种滚动方式。但是，当我添加一个 div 容器以使所有内容居中时……

<div id="profileContainer">
<div class="profileField address">
<div class="select-styled active">Arizona</div><ul class="select-options" style="display: block;"><li rel="">Select State</li><li rel="3526">Alabama</li><li rel="3556">Alaska</li><li rel="3547">Arizona</li><li rel="3510">Arkansas</li><li rel="3542">California</li>…<li rel="3554">Wyoming</li></ul></div>
</div>
</div>

这种风格

#profileContainer 
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    width: 100%;
    max-width: 720px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

但现在无法滚动。这是我的 JSFiddle——https://jsfiddle.net/d2r50gc1/。我怎样才能使我的项目在屏幕中心居中，并且在无序列表上也有一个滚动条，以便我可以看到所有项目？

【问题讨论】：

寻找不同的居中方法？菜单是否应该 卡在页面中间？也许 absolute 而不是 `fixed.... 但是你的包装器正在崩溃。

我将值从“fixed”更改为“absolute”，虽然我现在可以滚动，但整个屏幕都会滚动，而不仅仅是我希望滚动条出现的 DIV -- @ 987654322@.

@Mike 我现在在阅读您的评论后意识到您似乎希望 div 在内部滚动。我想你会发现我的答案是一个对用户体验更友好的解决方案，而不是滚动整个包含的 div。

【参考方案1】：

我想我已经完成了你想要的：https://jsfiddle.net/d2r50gc1/11/

您需要做的就是对无序列表应用一些样式：

ul.select-options 
    max-height: 15em;
    overflow-y: scroll;
    overflow-x: hidden;

通过使用em（或rem）单位而不是px，您可以保留对选择更改其字体大小的用户的支持，我注意到您对另一个答案的cmets 表示了兴趣。您可以将任意选择的乘数 15em 更改为您认为合适的任何数字。您也可以考虑使用rem 而不是em，但您必须根据最终所需的用例自行做出决定。如果您将padding 定义更改为也使用em 或rem，您可以使用数学设置大小以始终在下拉列表中显示一定数量的元素。

【讨论】：

是的，这正是我想要的。谢谢！

【参考方案2】：

我刚刚更新了你的 jsfiddle

您只需将高度和溢出添加到您的#profileContainer

Update

希望这对您有所帮助。

【讨论】：

它不是添加固定高度的选项，因为容器中的元素数量是可变的，我不想经常调整固定高度（当用户调整字体大小时也是如此）这将搞砸其他元素的显示）。我用你的溢出调整了小提琴——jsfiddle.net/d2r50gc1/4，但菜单仍然没有通过滚动条延伸到容器的边界之外。

【参考方案3】：

现在添加第二个答案，我想我了解您的要求。我真诚地鼓励您先查看我的其他答案，我认为您会发现它是一个更好的选择。

滚动 div.profileField 小提琴：https://jsfiddle.net/d2r50gc1/12/

通过以下 CSS 实现：

div.profileField 
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  box-sizing: border-box; 

【参考方案4】：

这里是您的JSFiddle，关于您的要求。

.select 
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-transform: translateX(calc(50% + 110px));
    transform: translateX(calc(50% + 110px));

说明

我在 .select 类中添加了溢出，然后使用转换使其居中。希望这能满足您的需求。

【参考方案5】：

您是否正在尝试实现这样的目标

.select-options height:60%; overflow-x: hidden; Add this properties in same class

Demo

【讨论】：

您在容器上有滚动条，但我希望滚动条仅在扩展形式的元素（带有状态的 DIV）上。我尝试添加“溢出：滚动；”到预期的元素，但没有出现滚动条 -- jsfiddle.net/d2r50gc1/13 .