Compact NiceScroll Scroller within a narrower div compared to the width of the scrolled div

Question

Compact NiceScroll Scroller within a narrower div compared to the width of the scrolled div

I am currently working on a table layout where I have fixed two columns on the left, similar to what is shown in this example. To enhance the scrolling experience, I am using the nicescroll plugin. However, I have encountered an issue where the plugin begins scrolling from the leftmost side of the table rather than starting at the end of the fixed columns and then moving towards the right to cover all columns. Essentially, I would like the scrolling behavior to resemble relative scrolling, where the parent div's width is smaller than the total scrollable area.

$('.table').niceScroll({
  cursorborder: "",
  cursorcolor: "#b1babe",
  boxzoom: false,
  autohidemode: false,
  cursorfixedheight: 140,
  horizrailenabled: true,
  railhoffset: {top:0, left: 0}
});
$("div[id^='ascrail']").show();

jquery css nicescroll

Answer 1

Answer №1

If you're looking to switch from the tableHeadFixer plugin to niceScroll, consider dividing the table into two separate divs:

The first div should only contain the table header columns
The second div should hold the table body

Keep in mind that the niceScroll plugin is designed to work with divs rather than tables.

Here's how you can implement niceScroll for both divs, but have it only function on the second one: The scroll event needs to be managed so that scrolling the second div to the right will also scroll the first div accordingly.

$(function () {
  $('#parentHeader').niceScroll({
    cursorwidth: '0px',
    cursorborder: "",
    cursorcolor: "#b1babe",
    boxzoom: false,
    autohidemode: false,
    cursorfixedheight: 140,
    railhoffset: {top: 10, left: 0},
  });
  $('#parent').niceScroll({
    cursorborder: "",
    cursorcolor: "#b1babe",
    boxzoom: false,
    autohidemode: false,
    cursorfixedheight: 140,
    railhoffset: {top: 10, left: 0},
  });

  $('#parent').on('scroll', function(e) {
    var lastScrollRight = $(this).scrollLeft();
    $("#parentHeader").getNiceScroll(0).doScrollLeft(lastScrollRight, 1);
  });
});

body {
  margin: 0 auto;
  width: 1200px;
}

h2 {
  margin-bottom: 1em;
  text-align: center;
}

#parent {
  height: 100px;
}

#fixTable {
  width: 1500px !important;
}

#fixTableHeader {
  width: 1500px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/lai32290/TableHeadFixer/master/tableHeadFixer.js"></script>
<script src="https://rawgit.com/inuyaksa/jquery.nicescroll/master/dist/jquery.nicescroll.min.js"></script>

<h2><a href="https://github.com/lai32290/TableHeadFixer " target="_blank" title="Script GitHub">TableHeadFixer Fix Head
    and Left Column</a></h2>

<div id="parentHeader">
    <table id="fixTableHeader" class="table">
        <thead>
        <tr style="text-align: center">
            <th>Year</th>
            <th>January</th>
            <th>February</th>
            <th>March</th>
            <th>April</th>
            <th>May</th>
            <th>Total</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div id="parent">
    <table id="fixTable" class="table">
        <tbody>
        // Table data here...
        </tbody>
    </table>
</div>

Answer 2

If you're looking to switch from the tableHeadFixer plugin to niceScroll, consider dividing the table into two separate divs:

The first div should only contain the table header columns
The second div should hold the table body

Keep in mind that the niceScroll plugin is designed to work with divs rather than tables.

Here's how you can implement niceScroll for both divs, but have it only function on the second one: The scroll event needs to be managed so that scrolling the second div to the right will also scroll the first div accordingly.

$(function () {
  $('#parentHeader').niceScroll({
    cursorwidth: '0px',
    cursorborder: "",
    cursorcolor: "#b1babe",
    boxzoom: false,
    autohidemode: false,
    cursorfixedheight: 140,
    railhoffset: {top: 10, left: 0},
  });
  $('#parent').niceScroll({
    cursorborder: "",
    cursorcolor: "#b1babe",
    boxzoom: false,
    autohidemode: false,
    cursorfixedheight: 140,
    railhoffset: {top: 10, left: 0},
  });

  $('#parent').on('scroll', function(e) {
    var lastScrollRight = $(this).scrollLeft();
    $("#parentHeader").getNiceScroll(0).doScrollLeft(lastScrollRight, 1);
  });
});

body {
  margin: 0 auto;
  width: 1200px;
}

h2 {
  margin-bottom: 1em;
  text-align: center;
}

#parent {
  height: 100px;
}

#fixTable {
  width: 1500px !important;
}

#fixTableHeader {
  width: 1500px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/lai32290/TableHeadFixer/master/tableHeadFixer.js"></script>
<script src="https://rawgit.com/inuyaksa/jquery.nicescroll/master/dist/jquery.nicescroll.min.js"></script>

<h2><a href="https://github.com/lai32290/TableHeadFixer " target="_blank" title="Script GitHub">TableHeadFixer Fix Head
    and Left Column</a></h2>

<div id="parentHeader">
    <table id="fixTableHeader" class="table">
        <thead>
        <tr style="text-align: center">
            <th>Year</th>
            <th>January</th>
            <th>February</th>
            <th>March</th>
            <th>April</th>
            <th>May</th>
            <th>Total</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div id="parent">
    <table id="fixTable" class="table">
        <tbody>
        // Table data here...
        </tbody>
    </table>
</div>

Compact NiceScroll Scroller within a narrower div compared to the width of the scrolled div

Answer №1

Similar questions

Unusual naming problem encountered in DataTables when employing diverse functions

Combining the functionality of a click event

What is the process for sending dynamic emails in Business Catalyst?

Loop through a CodeIgniter database result object using Ajax

Is there a way to send HTML element values to a MySQL Database in Django using Ajax without utilizing a form?

Modify the size of the text in an <iframe> using inline css

Disabling Sidebars on Blog Articles Exclusively for Mobile Devices

Utilizing jQuery to apply a class to a text element within a div

I am experiencing issues with the jQuery function within my MVC Application

Shadowy figure in block form

What is the best way to ensure that two divs in the same row float in opposite directions?

Retrieve Header information when making a cross-domain AJAX request

Retrieving the HTML content of a Drupal article using jQuery's $.get method

Java Applet for capturing specific sections of a webpage to create a screenshot

Creating a vertical navigation menu and displaying its submenu on corresponding pages in a horizontal layout

Utilizing a function within a span element

How can I ensure that my navbar-right remains fixed to the right side of the screen and is always visible at the top of the page as I

Highlight react-bootstrap NavItems with a underline on scroll in React

Steps for including a caption in a Fancybox-Media box

The localization feature in jQuery mobile is causing the button style to disappear