Develop Reference

Horizontal and vertical scrolling issue in a custom react data table component

I have developed a custom react data table component which displays headersData, rowData and footerData in the table dynamically.
When it comes to the scrolling I am trying to achieve the below 2 points:
Horizontal scrolling -
A) First two columns should be fixed and from third column till the last column, horizontal scrolling should be enabled.
B) Horizontal scrolling should always be visible at the bottom of the window. There is a max-height of 300px and it should
be always visible at the bottom.
Vertical scrolling -
The header row should be fixed at the top when we are scrolling vertically.
The custom react data table and my attempt is there in the below CodeSandBox link. I have achieved the first point mentioned in Horizontal scrolling but could not achieve the second point mentioned in the horizontal scrolling and the vertical scrolling with the fixed header at the top. Tried for many days and couldn't figure out. For this reason, thought of seeking help and posted the question here. Kindly let me know your thoughts on how we can implement this feature. Thanks in advance.
CodeSandBox link:
https://codesandbox.io/s/custom-react-data-table-970ed?file=/src/tableContainer/DataTableContainer.tsx
Note: It doesn't need to support in IE.
Expecting the scrolling behavior to be like shown in the below link:
https://jsfiddle.net/6qxcaemu/5

jQuery chosen scroll issue, element which contains the chosen doesn't scroll

I am facing some issues with the jQuery Chosen plugin. Here are some screenshots:
The focused Users input is a jQuery Chosen select input within a tab in a Bootstrap dialog (but this doesn't matter anyway). As you can see the scroll of the Chosen's ul.chosen-results didn't reach the bottom here.
Now if I scroll down the results:
I reach the bottom of ul.chosen-results, but if scroll with the mouse wheel down further from this point on, the rightmost scroll doesn't scroll down.
But I would like the other scroll to go down too from that point on while scrolling down ul.chosen-results with the bottom scroll of ul.chosen-results reached, to achieve this:
See that the rightmost scrollbar is down here too. This is what I want to reach while scrolling on ul.chosen-results. Does Chosen somehow inhibit the scroll event propagation when scrolling ul.chosen-results?
Can I achieve what I want? How?
Thanks for the attention!

In the not minified js plugin file
find following code
high_top = this.result_highlight.position().top + this.search_results.scrollTop();
and replace it by this.
high_top = this.result_highlight.position().top;
This issues has been addressed here another possible fix is to update to jQuery 2.2.1

Prevent position:absolute from taking content out of the flow of a vertical scrollbar

The issue is illustrated in the first column of this JSFiddle.
Basically, I want to make a first column in a table that stays fixed when scrolling horizontally, but not vertically. I found a solution here, but this only works when there isn't a vertical scrollbar. With that included, the first column leaves the flow of the containing div and the scroll bar doesn't apply to it.
How do I get around this? Is there a way to do this without position:fixed or position:absolute? I had the idea of hiding the portion of the first column that flows out of the scrollbar, but I'm not sure how this is implemented.

Smooth scroll div horizontally by a pixel amount, no scrollbars

I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.
I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.
I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.
Here's what I've got:
http://jsfiddle.net/696je/
I'm just looking for a function and the way to activate the function for left/right buttons.
I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.

It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)
here is a jsFiddle implementation with minimum possible wrappers.

I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.
I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.
I must give the javascript for keypress credit from this post

ExtJS Grid Scrollbar jumps in ie8

I'm using ExtJS 4.0.2 and there seems to be a bug, and I haven't found a clear solution to it.
I have a container with anchor layout, which contains some elements and a grid. When the window is re-sized so the grid doesn't fit anymore, the scrollbar appears on the container which is correct. However if I scroll down to the end, and select an item in the grid, the scroll jumps to the middle. This problem appears only in IE 8. Is there a fix for this?
Thanks in advance.

I read about a month ago that someone wanted to scroll to the same position after destroying and rendering the grid. The solution to that idea was to assign the scrolled pixels in a var, then after rendering, set the scroll to the same pixels (there is a function scrollTo();). So you could do the same thing, when you click and it scrolls to top, force it to scroll the same position. It's a stupid solution but.. just in case you can't fix it.