Question

这就是我的html：

<div class='header-wrapper'>
    <div class='title'>Title</div>
</div>


<div class='some-wide-content'>
</div>

我们假设浏览器窗口的宽度为500像素，我希望标题包装也是500px的彩色背景，标题应该水平居中在这500px内。虽然某种广泛内容是一张宽度为1000px的大表。由于大表格，此页面的主体比浏览器窗口宽，因此用户可以水平滚动此页面。但是当他们横向滚动时，我不希望 header-wrapper 移动，我无法使 header-wrapper position: fixed因为它应与页面垂直移动。

那么，当页面主体水平滚动时，如何制作一个不会水平滚动的元素？

编辑：我目前的解决方案是只允许某种广泛内容滚动，因此当用户水平滚动时，它们不会滚动整个页面。但我无法使用此解决方案，因为我想出于某种原因水平滚动整个页面。

Answer 1

你可以这样做。避免整页滚动。而是仅将scroll属性赋予宽内容包装器。

＆＃13;

body{
    overflow-x:hidden;
}
.header-wrapper{
    width:500px;
    background:#f00;
    color:#fff;
    text-align:center;
}
.some-wide-content{
    width: 1000px
}
.wide-wrapper{
    width:500px;
    overflow:scroll
}

＆＃13;

<div class='header-wrapper'>
    <div class='title'>Title</div>
</div>
<div class="wide-wrapper">
    <div class='some-wide-content'>
        As an example, let's say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That's ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before.

        Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation. Inefficient updating has become a serious problem.
    </div>
</div>

＆＃13;

Answer 2

我在表格中添加了一个滚动条。您可以根据需要更改部分和表格的宽度。

<强> HTML

<html>
<head>
<style> 
div {
    width: 500px;
    height: 110px;
    border: thin solid black;
    overflow-x: overflow;
    overflow-y: hidden;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<div>
<table width=1500px>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Contact</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Country</th>
    <th>Country</th>
    <th>Country</th>
    <th>Country</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>
</div>
</body>
</html>

希望你得到答案。

当页面主体水平滚动时，如何使元素不会水平滚动

2 个答案: