3

This is what my html is like:

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


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

Let's say a browser window is 500 px wide, I want header-wrapper to be also 500px with a color background, title should be centered horizontally within this 500px. While some-wide-content is a big table with width of 1000px. Because of the big table, the body of this page is wider than browser window, so user can scroll this page horizontally. But when they scroll horizontally, I don't want header-wrapper to move, I can't make header-wrapper position: fixed because it should move vertically with the page.

So, how can I make an element that doesn't scroll horizontally when the page body scroll horizontally?

EDIT: My current solution is to only make some-wide-content scrollable so when user scroll horizontally, they are not scrolling the whole page. But I can't use this solution because I want to scroll the whole page horizontally for some reason.

Arch1tect
  • 4,128
  • 10
  • 48
  • 69
  • 2
    Possible duplicate of [Position element fixed vertically, absolute horizontally](https://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally) – sarthak Jan 06 '18 at 07:27
  • @sarthakupadhyay Does looks similar but mine question is the opposite, and I can't seem to figure out a solution reading from that answer... – Arch1tect Jan 06 '18 at 07:59

2 Answers2

2

You can do something like this. Avoid the scroll on full page. Instead give the scroll property to wide content wrapper only. 

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>
pixlboy
  • 1,452
  • 13
  • 30
  • 500px is an example, browser window can be of different width, but that's not important, I can put `width:100%`. The problem is I don't want to disable scrolling page body and only scroll the big table so I can't use this solution. This is actually what I was doing, but I notice it has tiny problem with iphone browsers... – Arch1tect Jan 06 '18 at 07:38
  • This solution is only stopping the horizontal page scroll. The vertical will work. This actually works like an image gallery in middle of a page. What is the problem with iPhone browsers? – pixlboy Jan 06 '18 at 07:40
  • right, vertical works. The problem is with `some-wide-content`, when you scroll it on iphone, it won't have momentum, it's a sticky feeling of scroll. It 's fine on Android or computers. Iphone only supports momentum scrolling when you are scrolling the entire page. – Arch1tect Jan 06 '18 at 07:46
  • There's actually a solution to that iphone problem and it works for me -https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ – Arch1tect Jan 06 '18 at 08:12
  • Very well then !! – pixlboy Jan 06 '18 at 10:21
0

I added a scroll bar to the table. you can change the width of the section and the table as you wish.

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>

Hope you got your answer.

Binara Medawatta
  • 512
  • 1
  • 9
  • 28