template-134.html

<h1 id="scroll-speed">Scroll Speed</h1>
<p>Generally, Grid will contain a large number of rows. Grid elements could block page scrolling due to slow native wheel scrolling speed and long scroll distance. So, by default, Grid&#39;s wheel scroll speed will increase exponentially once the content height exceeds a certain threshold. This behavior may not be wanted, so to return to the native wheel default behavior enable <code>linearWheelScrolling</code>.</p>
<p>You can also force scrolling to move for the whole row by using the <code>stepScroll</code> property.</p>
<h2 id="example">Example</h2>
<code-sandbox hash="521b2b8d"><pre><code class="language-css">efx-grid {
    height: 400px;
}
</code></pre>
<pre><code class="language-html">&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
</code></pre>
<pre><code class="language-javascript">import { halo } from &#39;./theme-loader.js&#39;; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.

/* ---------------------------------- Note ----------------------------------
  DataGenerator, Formatters and extensions are exposed to global scope
  in the bundle file to make it easier to create live examples.
  Importing formatters and extensions is still required in your application. 
  Please see the document for further information.
---------------------------------------------------------------------------*/
var fields = [&quot;companyName&quot;, &quot;market&quot;, &quot;CF_LAST&quot;, &quot;CF_NETCHNG&quot;, &quot;industry&quot;, &quot;id&quot;];
var records = DataGenerator.generateRecords(fields, { numRows: 1000 });
var configObj = {
    linearWheelScrolling: true,
    stepScroll: true,
    columns: [
        {name: &quot;ID&quot;, field: fields[5], width: 40},
        {name: &quot;Company&quot;, field: fields[0]},
        {name: &quot;Market&quot;, field: fields[1], width: 100},
        {name: &quot;Last&quot;, field: fields[2], width: 80},
        {name: &quot;Net. Chng&quot;, field: fields[3], width: 80},
        {name: &quot;Industry&quot;, field: fields[4]}
    ],
    staticDataRows: records
};

var grid = document.getElementById(&quot;grid&quot;);
grid.config = configObj;
</code></pre>
</code-sandbox>