CODEWITHSUNDEEP
htmlcss
Arch1tect
Arch1tect

Reputation: 4281

How to make an element doesn't scroll horizontally when the page body scroll horizontally

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.

Upvotes: 3

Views: 806

Answers (2)

Binara Medawatta
Binara Medawatta

Reputation: 532

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.

Upvotes: 0

pixlboy
pixlboy

Reputation: 1502

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>

Upvotes: 2

Related Questions