javascript - How to make a horizontal div scroll bar float like a fixed CSS div - Stack Overflow

admin管理员组

文章数量:1327446

I am trying to find the solution for displaying very wide and long tables. My header and footer are fixed by using CSS style position: fixed;where as my container is flexible to contain any amount of data. Below is my page layout.

---

Header

---

Container div

My Table

End of div

---

Footer

---

I have made my container div horizontally scrollable but to find the scroll bar I have to scroll down until the end of the whole page or table in my context.

So is there is anyway I can make my scrollbar appear just before the end of the browser window or in other words I make it fixed just like my header and footer, so that I don't need to scroll down the whole page for looking my table data.

I appreciate if you can provide me any help.

EDIT Here are the images for your help

Image before Scrolling

Image after Scrolling down

I am trying to find the solution for displaying very wide and long tables. My header and footer are fixed by using CSS style position: fixed;where as my container is flexible to contain any amount of data. Below is my page layout.

---

Header

---

Container div

My Table

End of div

---

Footer

---

I have made my container div horizontally scrollable but to find the scroll bar I have to scroll down until the end of the whole page or table in my context.

So is there is anyway I can make my scrollbar appear just before the end of the browser window or in other words I make it fixed just like my header and footer, so that I don't need to scroll down the whole page for looking my table data.

I appreciate if you can provide me any help.

EDIT Here are the images for your help

Image before Scrolling

Image after Scrolling down

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 21, 2016 at 14:08 geeksal asked Feb 21, 2016 at 13:47 geeksalgeeksal 5,01633 gold badges2727 silver badges4949 bronze badges 2

• a jsfiddle demo would be greatly appreciated. Anyway, AFAIK you cannot change the actual position of a scrollbar without some hacky javascript – Aziz Commented Feb 21, 2016 at 13:53
• @Aziz look at the images I have just uploaded. No problem If you provide a workable solution in javascript, however CSS will be preferred – geeksal Commented Feb 21, 2016 at 14:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

header {
  top: 0;
}

footer {
  bottom: 0;
}

header, footer {
  position: fixed;
  background: tomato;
  width: 100%;
  color: white;
  height: 20px;
  text-align: center;
}

div {
  position: fixed;
  top: 20px;
  overflow: auto;
  bottom: 20px;
  width: 100%;
}

td {
  white-space:nowrap;
}

table {
  border-collapse:collapse;
}

td {
  border: 1px solid black;
}

<header>
  The Header
</header>

<div>
  <table>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
  </table>
</div>

<footer>
  The Footer
</footer>

You can try to set the height of the table to the total height of the window, so that upon landing your page consists of a div with a horizontal and vertical scroll bar. Make the div something like width:100%; height: 780px; (height of my window)

本文标签： javascriptHow to make a horizontal div scroll bar float like a fixed CSS divStack Overflow