CSS (or jQuery): How to set horizontal scrollbar in the middle position?


Tags: jquery,css,scrollbar,horizontal-scrolling

Problem :

I work on a website whose main content block is too wide to fit fully inside the smaller resolution screens.

The content is centered in the middle of the screen.

I need a horizontal scrollbar to appear when the content doesn't fit inside the screen.

I force the horizontal scrollbar to appear with a div:

<div id="stretcher" style="width:1200px; min-width:1200px; height:1px; position:absolute; margin:0 auto"></div>

The problem: if I initially open the website in a large resolution screen (or wider window), and then make the browser window narrower, the scrollbar appears just where it's supposed to. However - if I continue making the window narrower, the scrollbar handle stays at the left side, and scrolling further to the left becomes impossible. Also, If the browser window is initially smaller than the content, the scrollbar appears all the way to the left, and I can't scroll more to the left to reveal the left side of the content that is hidden.

The question: how can I force the scroller to the middle, so that I can scroll left to reveal the hidden part of the content?

I would be grateful for your advice!



Solution :

JSFiddle of my demo: http://jsfiddle.net/Y9DCs/

From what I can see, right now you have a 2 column layout:

On the left is your "access" panel that contains your menu. On the right is your main content area.

I think you may be better served to have a main container with 3 sections:

|----------------wrapper---------------------|
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|  Menu   |       Content        |   Dummy   |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|--------------------------------------------|

You can then size the width of wrapper as Content + (2 * Menu), and give it margin: 0 auto;

Menu and Dummy would be the same width, except dummy would just be a div with no content.

This will effectively size the whole area as centered on the screen with the menu appearing to hang off the left side of Content.


    CSS Howto..

    How to get rid of !important tags?

    How to add materialize css to an angularjs project?

    How is possible to get 2d transformation css vertical way

    CSS How to display an image in the size of a / text line

    How to re-animate CSS3 animations on class change

    what is jquery CSS frame work and how to use the frame work for giving look and feel to the website? [closed]

    How to work with Action Link when using CSS

    How to deal with collapsing margins on html & body?

    How to change format of long text in cell?

    How can I completely cancel a class when a CSS media style is used?

    How to create a vertical column in a table using css

    How to vertically align text in my columns? [closed]

    How to make a div to fit all available width even hidden with scroll?

    How to increase the height of footerrow in jqgrid

    How to change the width of bootstrap popover

    How to CSS select each first div without class after div with class?

    How to see CSS boxes in firefox inspector

    Make a slide show by fading in background images [closed]

    How to blur background img - css?

    How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla

    How do I set the table row heights to minimum except last row?

    how to load multiple lazy css load file

    How to get slanted borders in CSS

    How to change the css of a text input using jquery?

    How to have CSS animation NOT consume one's entire CPU?

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    How do you implement CSS without to have clear:both on float left and float right

    How to create a fluidic list using css

    How do I style a div with inner floats to expand horizontally to allow all inner floating divs to fit?

    How does one style element within a label say?