具有最小宽度设置滚动的 div 被向左截断
Posted
技术标签:
【中文标题】具有最小宽度设置滚动的 div 被向左截断【英文标题】：div with min-width set scroll is cut off to the left 【发布时间】：2022-01-10 22:41:48 【问题描述】：我正在尝试创建一个网页，其中包含一个代表一张纸的居中 div。纸张的大小永远不会改变是非常重要的，因此它同时设置了min-width 和max-width 属性：
body
display: flex;
align-items: center;
justify-content: center;
overflow: scroll;
.paper
width: 8.5in;
min-width: 8.5in;
max-width: 8.5in;
height: 11in;
min-height: 11in;
max-height: 11in;
background-color: red;
border: 10px solid black;
<!DOCTYPE html>
<html>
<body>
<div class="paper"></div>
</body>
</html>问题是当浏览器窗口尺寸较小时（例如在移动端），div的左侧被截断，无法滚动到。
我怎样才能使它可以滚动到 div 的左边缘？
【问题讨论】：
【参考方案1】：在另一篇文章中找到了解决方案： Can't scroll to top of flex item that is overflowing container
使用justify-content 会导致 div 被吸附到页面的中心，从而无法滚动到页面的左侧。
最简单的解决方法是使用margin: auto 而不是弹性框来居中：
.paper
margin: auto;
width: 8.5in;
min-width: 8.5in;
max-width: 8.5in;
height: 11in;
min-height: 11in;
max-height: 11in;
background-color: red;
border: 10px solid black;
<!DOCTYPE html>
<html>
<body>
<div class="paper"></div>
</body>
</html>【讨论】：
【参考方案2】：我发现justify-content: center 导致了这个问题 - 左边框不可见。
根据https://www.w3schools.com/cs-s-ref/css3_pr_justify-content.asp
justify-content 属性会在项目未使用主轴（水平）上的所有可用空间时对齐灵活容器的项目。
评论它，使左边框可见。
body
overflow: scroll;
margin: 0;
display: flex;
align-items: center;
/*justify-content: center;*/
.paper
width: 8.5in;
min-width: 8.5in;
max-width: 8.5in;
height: 11in;
min-height: 11in;
max-height: 11in;
background-color: red;
border: 10px solid black;
<!DOCTYPE html>
<html>
<body>
<div class="paper"></div>
</body>
</html>【讨论】：
可以确认在justify-content 被删除后滚动工作。但是，这会导致 div 不再居中:(
也许问题是您的设备显示宽度小于 div 的宽度，因此当 justify-content 尝试居中时，左边框不知何故超出了显示范围，但这只是猜测.也许您可以尝试将in 英寸替换为% 或vw/vh，删除注释行，看看它是否正常工作。
好的，我找到了一个有同样问题的帖子***.com/questions/33454533/…，我会创建一个答案
是的，最简单的解决方案似乎只是使用margin: auto 居中【参考方案3】：
<style>
div::-webkit-scrollbar
width: 8px;
div::-webkit-scrollbar-track
background-color: #f6f6f6;
box-shadow: 0 0 10px #ddd inset;
div::-webkit-scrollbar-thumb
background-color: #1E90FF;
border-radius: 10px;
div::-webkit-scrollbar-thumb:hover
cursor: pointer;
background-color: #FF8C00;
</style>
【讨论】：
这对我遇到的问题没有帮助，它只是设置滚动条的样式以上是关于具有最小宽度设置滚动的 div 被向左截断的主要内容，如果未能解决你的问题，请参考以下文章