+ Start a Discussion
SHaron ToSHaron To 

Lightning Component Scroll Not Working

Hello everyone,

I currently have a lightning application within Salesforce1 that contains multiple lightning components. The components appear past the screen, but when I try to scroll, I can see the bottom of the screen, but I get snapped back up to the top of the page. I'm having trouble figuring out why the component won't allow me to scroll down and how to fix it.

I've tried applying "slds-scrollable--y" to the div class, but that doesn't work. I've also tried adding style="overflow:scroll" as well but also to no avail.

Any help would be greatly appreciated! Thanks!
NagendraNagendra (Salesforce Developers) 
Hi Sharon To,

If a component using this utility is accessed through Salesforce1 then the content and scroll bars do not react to user touch for horizontal scrolling. The content that extends horizontally beyond the initial view will not be accessible to the user through touch interactions, although this will still scroll as expected when using mouse click interactions through a desktop browser. 

This affects both the downloadable and mobile browser versions of Salesforce1.

1. Create a Lightning Component that contains content that is wider than the device screen width (height if vertical). 
2. Add the Lightning Design System "slds-scrollable--x" class around the content: 
<div class="slds-scrollable--x">Scrollable Content Here</div> 
3. Try to scroll the content horizontally within Salesforce1. 

*Underlying issue is same for both vertical and horizontal scroll

There is no workaround at this time. If a component needs to be accessed through Salesforce1 then do not include content formatted to be wider than the device screen.

For more information please refer to the below link:

Please mark this as solved if it helps.

Best Regards,
SHaron ToSHaron To
Hi Nagendra,

Thanks for the advice!

My content width fits within the screen, however the height does not and after trying <div class="slds-scrollable--y"></div> it didn't solve the problem. 

My current situation is that I have a to-do list, and when the user taps the list item, it disappears because it's been completed. However, if there are more than 4 items, the items already pass the screen's height and I am unable to scroll down to view the rest of the items. The only time I am able to scroll is if I tap one of the viewable list items, then I can scroll all the way to the bottom of the page. However, I don't want to have to do that because if the item has not been completed it should not be tapped.

User-added image
This is all of the page that I am able to see. The "Add Checklist Item" form is not completely viewable, nor is the button to save a new item. 
User-added image
However if I remove all of the other items, the form is not in view and so are the other buttons at the bottom of the page
Hi SHaron To, 

I am having this exact same issue. Were you able to resolve this? If so, how?

Thanks in advance!
Rashika SinghRashika Singh
i am also facing same isuue..! How i can solve this????
Evan RochkindEvan Rochkind
I'm also having the same issue!
chakradhar boinichakradhar boini
I know its not eligent solution, but this is what iam doing. I am adding extra breaks <BR/> after the list field. When user open the list he will have enough space to see more items. Yes the issue will still be there if the list is bigger.
Neha KhadeNeha Khade
I was having the same issue its resolved by below code:
<div class="cuf-content scrollable" data-aura-rendered-by="25:1833;a" data-scoped-scroll="true" style="height:400px;">
///scrollable content//