1. Home
  2. Forum
  3. React - EJ 2
  4. Sticky Scrollbar

Sticky Scrollbar

Hello,

Thank you again for your wonderful product.

I would like to know if it's possible to have the grid (horizontal) scrollbar stick to the bottom of the page when the grid overflows out of the window.


3 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team October 1, 2020 01:24 PM UTC

Hi Jesse, 
 
Greetings from Syncfusion support. 

Query: I would like to know if it's possible to have the grid (horizontal) scrollbar stick to the bottom of the page when the grid overflows out of the window 

By default, we cannot sticky the element scrollbar in DOM. But, we achieved your requirement by using the following solution. In that, we have rendered a div element above the Grid with a scroller. You can sticky this div element as you need. In the onscroll event of both scrollDiv and grid parent element, we dynamically changed the scrollbar position. Please refer to the below documentation and sample for more information. 


export class Default extends SampleBase { 
  componentDidMount(){ 
    var wrapper1 = document.getElementById("scroll_wrapper1"); 
    var wrapper2 = document.getElementById("scroll_wrapper2"); 
    wrapper1.onscroll = function() { 
      wrapper2.scrollLeft = wrapper1.scrollLeft; 
    }; 
    wrapper2.onscroll = function() { 
      wrapper1.scrollLeft = wrapper2.scrollLeft; 
    }; 
  } 
    render() { 
        return (<div> 
          <div id="scroll_wrapper1"> 
    <div id="scroll_div"></div> 
</div><div id="scroll_wrapper2"> 
    <div id="grid_parent"> 
          <GridComponent id="Grid"  dataSource={orderDetails} height='100%' width='100%'> 
            <ColumnsDirective> 
              <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective> 
              <ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective> 
              <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'/> 
              <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/> 
              <ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format='yMd' textAlign='Right'></ColumnDirective> 
              <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective> 
            </ColumnsDirective> 
          </GridComponent> 
        </div> 
      </div></div>); 
    } 
} 


  <style> 
    #scroll_wrapper1, 
    #scroll_wrapper2 { 
      width: 600px; 
      overflow-x: scroll; 
      overflow-y: hidden; 
    } 

    #scroll_wrapper1 { 
      height: 20px; 
      position: -webkit-sticky !important;  /* sticky the element */ 
      position: sticky !important; 
      top: 80% !important;       
      z-index: 1 !important; 
    } 

    #scroll_wrapper2 { 
      height: 500px; 
    } 

    #scroll_div { 
      width: 900px; 
      height: 20px; 
    } 

    #grid_parent { 
      width: 900px; 
      height: 500px; 
      overflow: auto; 
    } 
  </style> 



Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


JL Jesse LaVere October 30, 2020 09:36 PM UTC

I've tried this and failed. :( Perhaps because we're using frozen.

Here's a link to our code:
https://stackblitz.com/edit/react-1drquv-yf6cq8

Can you tell us if it's possible to have a scrollbar on the right size of the frozen screen visible at all times?

RS Rajapandiyan Settu Syncfusion Team November 2, 2020 12:57 PM UTC

Hi Jesse, 
 
Thanks for sharing the sample with us. 

Query: Can you tell us if it's possible to have a scrollbar on the right size of the frozen screen visible at all times? 

By analyzing your code, we found that the height is not set in the Grid component. So, the default height: “auto” as set to the Grid component and window’s vertical scrollbar will be shown when the grid elements exceeds the screen height.  

We have suggested you set height property in the Grid to show the horizontal scrollbar of Grid above your footer element and the vertical scrollbar will be shown with in the Grid. Please refer to the below code example and screenshot. 
 


<GridComponent 
        --------- 
        height="400px" 
      > 



 


You can also set responsive height to the grid element which adapts its parent element’s height. To do that, we need to set the Grid’s height as “100%”. Refer to the below code example and sample for more information. 

Index.js 

 return ( 
    <div style={{ height: "100%", border: "1px solid" }}> 
      <style>{icons}</style> 
      <div style={{ height: "90%", border: "1px solid" }}> 
        <GridComponent 
          height="100%" // adapts its parent container height 
        > 
          <ColumnsDirective>{columnDirectives}</ColumnsDirective> 
          <Inject services={services} /> 
        </GridComponent> 
      </div> 
      <div className="footer" style={{ height: "10%", border: "1px solid" }}> 
       ------- 
      </div> 
    </div> 
  ); 

Index.html 
 
  <style> 
    html, 
    body { 
      height: 100%; 
    } 

    #sample { 
      height: 100%; 
    } 
  </style> 



Help documentation:  



Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


Marked as answer
Loader.
Up arrow icon