如何使一个元素在页面主体水平滚动时不水平滚动

Question

如何使一个元素在页面主体水平滚动时不水平滚动

3

这是我的HTML代码：

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


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

假设浏览器窗口宽度为500像素，我希望header-wrapper也是500像素宽，并带有颜色背景，title应水平居中在这个500像素内。而some-wide-content是一个宽度为1000像素的大表格。由于这个大表格，页面的主体宽度大于浏览器窗口，所以用户可以横向滚动该页面。但当他们横向滚动时，我不想header-wrapper移动，我不能将header-wrapper设置为position: fixed，因为它应该随页面垂直移动。

那么，如何创建一个元素，在页面主体水平滚动时不会水平滚动？

编辑：我的当前解决方案是仅使some-wide-content可滚动，因此当用户水平滚动时，他们不会滚动整个页面。但我不能使用此解决方案，因为出于某些原因，我想横向滚动整个页面。

- Arch1tect

2

可能是垂直固定，水平绝对定位元素的位置重复问题。 - sarthak

@sarthakupadhyay 看起来很相似，但我的问题正好相反，我似乎无法从那个答案中找到解决方案... - Arch1tect

2个回答

0

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

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>

希望你已经得到了答案。

- Binara Medawatta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pixlboy · Accepted Answer

你可以像这样做。避免整个页面滚动，而是将滚动属性仅应用于宽内容包装器。

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
}

<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>