Skip to main content
Bounty Ended with 50 reputation awarded by jm.
fixed grammar
Source Link
pk1772
  • 143
  • 1
  • 7

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 androidDesktop 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.

I have tried scrollIntoView() and it works just fine for me in desktop, mobile browser(chrome android) and salesforce mobile publisher. 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 android -

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.

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.

Source Link
pk1772
  • 143
  • 1
  • 7

I have tried scrollIntoView() and it works just fine for me in desktop, mobile browser(chrome android) and salesforce mobile publisher. 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 android -

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.