What is the best way to incorporate a horizontal scroll bar that remains fixed at the bottom of the screen?

Question

What is the best way to incorporate a horizontal scroll bar that remains fixed at the bottom of the screen?

Within my main container, I have a div that has a height fitting perfectly into the main container but a width wider than the main container with an overflow for the horizontal scroll bar.

The challenge that I am facing is: 1. Instead of requiring the user to scroll to the bottom of the page and then use the horizontal scroll bar, I would like the horizontal scroll bar to be fixed at the bottom of the view (not within the div).

Upon loading, I want the horizontal scroll bar to be visible at the bottom of the user's screen. As the user scrolls down, the horizontal scroll bar should move down the page until it reaches the bottom where it will remain at the bottom of the div (not the window).

Any assistance on this matter would be greatly appreciated.

Thank you.

http://codepen.io/seraphzz/pen/LBIsf

jquery html css scrollbar

Answer 1

Answer №1

Here is my approach:

    function begin() {
      // Let's determine our requirements
          /* Window's height */
        var bodyHeight     = document.body.offsetHeight;
           /* Window's width */
        var bodyWidth     = document.body.offsetWidth;
          /* Table container */
        var myTable         = document.getElementById('tablefixed');
          /* Table container's height */
        var tableHeight   = myTable.offsetHeight;
          /* Content */
        var content =document.getElementById('gotainer');  
          /* Let's focus on layout */
        var col1Width    = 250;
        var tableWidth = 400;

          // Adjust values accordingly
        if (bodyHeight < tableHeight) 

               { /* If body's height is less than table */
                  content.style.height = tableHeight+ 20 +'px';
                  window.onscroll = function() {scrolling();    }
               }
        else 
               {
                  myTable.style.height =  bodyHeight+'px';
               }

         /* Keep an eye on col1 & col2 to stay within screen and cover full height */
        var column1 = document.getElementById('col1');
        var column2  =document.getElementById('content');
          /* Limit width */
        column2.style.width = bodyWidth - col1Width - tableWidth -50 +'px';
          /* Set height if CSS doesn't */
        //column1.style.height= content.offsetHeight+'px';
        //column2.style.height= content.offsetHeight+'px';
    }

    function scrolling() {
    function scrolling() {
if(!window.pageYOffset) {
     var pageScroll = document.getElementById('scrolling').scrollTop;  
     }

else {
    var pageScroll = window.pageYOffset;
      }
    var content =document.getElementById('gotainer');
    var tableContainer = document.getElementById('tablefixed');
    tableContainer.style.margin='-'+pageScroll+'px 0  0';
} 
        var content =document.getElementById('gotainer');
        var tableContainer = document.getElementById('tablefixed');
        tableContainer.style.margin='-'+pageScroll+'px 0  0';
    }


    window.onload     = begin ;
    window.onresize   = begin;
    window.onscroll   = scrolling;

Please note:(in case you missed it) - this code is for beginners.
View my codepen http://codepen.io/gcyrillus/pen/CHfAb It also works with Firefox.

Answer 2

Here is my approach:

    function begin() {
      // Let's determine our requirements
          /* Window's height */
        var bodyHeight     = document.body.offsetHeight;
           /* Window's width */
        var bodyWidth     = document.body.offsetWidth;
          /* Table container */
        var myTable         = document.getElementById('tablefixed');
          /* Table container's height */
        var tableHeight   = myTable.offsetHeight;
          /* Content */
        var content =document.getElementById('gotainer');  
          /* Let's focus on layout */
        var col1Width    = 250;
        var tableWidth = 400;

          // Adjust values accordingly
        if (bodyHeight < tableHeight) 

               { /* If body's height is less than table */
                  content.style.height = tableHeight+ 20 +'px';
                  window.onscroll = function() {scrolling();    }
               }
        else 
               {
                  myTable.style.height =  bodyHeight+'px';
               }

         /* Keep an eye on col1 & col2 to stay within screen and cover full height */
        var column1 = document.getElementById('col1');
        var column2  =document.getElementById('content');
          /* Limit width */
        column2.style.width = bodyWidth - col1Width - tableWidth -50 +'px';
          /* Set height if CSS doesn't */
        //column1.style.height= content.offsetHeight+'px';
        //column2.style.height= content.offsetHeight+'px';
    }

    function scrolling() {
    function scrolling() {
if(!window.pageYOffset) {
     var pageScroll = document.getElementById('scrolling').scrollTop;  
     }

else {
    var pageScroll = window.pageYOffset;
      }
    var content =document.getElementById('gotainer');
    var tableContainer = document.getElementById('tablefixed');
    tableContainer.style.margin='-'+pageScroll+'px 0  0';
} 
        var content =document.getElementById('gotainer');
        var tableContainer = document.getElementById('tablefixed');
        tableContainer.style.margin='-'+pageScroll+'px 0  0';
    }


    window.onload     = begin ;
    window.onresize   = begin;
    window.onscroll   = scrolling;

Please note:(in case you missed it) - this code is for beginners.
View my codepen http://codepen.io/gcyrillus/pen/CHfAb It also works with Firefox.

Answer 3

Answer №2

A simple and user-friendly solution for creating custom scrollbars that work seamlessly on desktops, tablets, and phones.

This tool is compatible with DIVs, IFrames, textareas, and even the overall document page (body) scrollbars.

Whether you need horizontal or vertical scrolling, this solution has got you covered.

Find out more by visiting:

Answer 4

A simple and user-friendly solution for creating custom scrollbars that work seamlessly on desktops, tablets, and phones.

This tool is compatible with DIVs, IFrames, textareas, and even the overall document page (body) scrollbars.

Whether you need horizontal or vertical scrolling, this solution has got you covered.

Find out more by visiting:

What is the best way to incorporate a horizontal scroll bar that remains fixed at the bottom of the screen?

Answer №1

Answer №2

Similar questions

Having trouble with your jQuery code not loading properly?

AngularJS dynamic data table for interactive and flexible data presentation

Unable to utilize the .keyCode method within a query selector

Having trouble with jQuery's 'OR' not functioning properly when iterating through mandatory input elements

Can a gradient box arrow be created using CSS 3?

What is the best way to prevent text overflow in a div while maintaining its width without dropping down

Delete the parent div when the button is clicked

Issue encountered: Inoperable binding when employing ko.mapping with two distinct models

Arranging extensive menu sections and content containment

Utilize Bootstrap to occupy the rest of the available vertical space

Codeigniter Implementation of Ajax File Upload

The AJAX request to the GitHub OAuth API using jQuery encountered an unknown issue and returned an unexpected error

Enhance video playback by eliminating accidental scrolling through the space bar

Discovering a collection of class elements with particular text in Selenium IDE

What method can be employed to eliminate choice selection lacking any value?

Efficiently handling multiple form submissions using a single jQuery Ajax request

Create a spectrum of vibrant colors depending on the numerical value

Remove any elements using jQuery that do not contain any content

Checkbox selection limitation feature not functioning correctly

What steps should I take to troubleshoot and fix the issue of data insertion errors in