6

what should I do to scroll view to the certain place in my component DOM? I want both solutions to work on pc and salesforce app. I've tried below functions:

  • this.template.querySelector('.selected-products').scrollIntoView() works but not on mobile (android nor ios)
  • window.scrollTo(0,0); doesn't work at all
  • this.template.querySelector('.mydiv').scrollTop=0 doesn't work at all

1 Answer 1

3
+50

I have tried scrollIntoView() and it works just fine for me in desktop, mobile browser(chrome android) and salesforce mobile publisher(app). I do not have a physical iOS device to test but it works in emulator. Code sample -

scrollIntoView.html

<template>
    <lightning-combobox
        name="select"
        label="Select"
        value={value}
        options={options}
        onchange={handleChange}
    ></lightning-combobox>
    <div class="container_1">div 1</div>
    <div class="container_2">div 2</div>
    <div class="container_3">div 3</div>
    <div class="container_4">div 4</div>
</template>

scrollIntoView.js

import { LightningElement } from 'lwc';

export default class ScrollIntoView extends LightningElement {
    value = '1';
    get options() {
        return [
            { label: 'Div 1', value: '1' },
            { label: 'Div 2', value: '2' },
            { label: 'Div 3', value: '3' },
            { label: 'Div 4', value: '4' }
        ];
    }

    handleChange(event) {
        this.value = event.detail.value;
        let containerChoosen = this.template.querySelector('.container_' + this.value);
        containerChoosen.scrollIntoView();
    }
}

scrollIntoView.css

div {
    border: 1px solid;
    height: 25rem;
    margin: 1rem;
}

.container_1 {
    background-color: yellow;
}

.container_2 {
    background-color: blue;
}

.container_3 {
    background-color: green;
}

.container_4 {
    background-color: red;
}

I have also tried with scrollIntoViewOptions and found it to be working in Desktop and on Android device -

this.template.querySelector('.container_' + this.value).scrollIntoView({
            block: 'center',
            behavior: 'smooth'
        });

However, the MDN documentation suggests compatibility issue with Safari browsers. You can check proof of my implementation here.

3
  • Incredible, this works when i deployed it to my dev playground, but it doesn't work when im using it on client's sandbox. I have a top div <div class="top-div"></div> and I'm invoking this.template.querySelector('.top-div').scrollIntoView(); and basically on iOS devices (iPhone, iPad) it does nothing. I tried to invoke it on several different classes and still nothing. What may be the cause? I'm losing my mind here
    – jm.
    Jun 17, 2021 at 7:37
  • Intrestingly, I moved your combobox to the bottom so it is below all divs and other content of the component and it stopped working!! Why!!
    – jm.
    Jun 17, 2021 at 7:52
  • Thanks man, but for me also does not work in all cases. Better this than nothing i guess. Granting best answer as it's very well described Jun 21, 2021 at 17:33

You must log in to answer this question.

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