0

We have lwc component which is placed in aura community page.

This component has lwc-datatable and some other html tags.

I have tried attaching onscroll event on many different tags including datatable, but on none it is firing and calling attached method.

I also have tried appending onscroll event dynamically but there also it not calling. Attached is the below code, I have tried dynamically. js file

scrollCheck(event){
    console.log('Current value of the input: ' + event.target.scrollTop);
    console.log('Current value of the input: ' + event.target.scrollBottom);
}

renderedCallback()
{
    var div= this.refs.myDiv;
    console.log(':div:',div)
    div.onscroll = this.scrollCheck;
}

html

<template>
<div class="slds-p-around_small" id="scroll_container" lwc:ref="myDiv" >
</div>

html when onscroll was added on element itself.

 <template>
    <div class="slds-p-around_small" id="scroll_container" lwc:ref="myDiv" >
    </div>
</template>
1
  • couldn't find anything on previous question available on stackexchange.
    – Ankuli
    Commented Jan 25 at 11:59

1 Answer 1

0

This issue is more related to browser onscroll event rather than LWC.

For capturing scroll events , we need to define the scrolling container using css overflow-y (for vertical scroll) property.

We need to define the scrolling area using below css :

.scrollContainer {
  max-height: 50px;
  overflow-y: scroll;
}

Here , we can use max-height or height property. I've used max-height since it enables us to set scrolling threshold explicitly.

As an example , I've applied onscroll event to the datatable as below :

<div class="scrollContainer" onscroll={scrollCheck}>
    <lightning-datatable
      key-field="id"
      data={recordsToDisplay}
      columns={columns}>
    </lightning-datatable>
  </div>

JS

scrollCheck(event){
    console.log('Current value of the input: ' + event.target.scrollTop);
    console.log('Current value of the input: ' + event.target.scrollBottom);
  }

Console enter image description here

More info : https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .