如何通过 javascript 滚动 Facebook 页面聊天联系人列表部分？答案

【问题标题】：How to scroll Facebook page chat contact list section by javascript?如何通过 javascript 滚动 Facebook 页面聊天联系人列表部分？
【发布时间】：2020-07-21 15:55:31
【问题描述】：

我正在编写一个 puppteer 脚本来评估 Facebook 页面聊天的联系人列表部分。联系人列表部分的类名是固定的，但高度因屏幕大小而异。

<div class="_24tx" style="height: 143px;">

当我尝试通过以下 javascript 代码以编程方式滚动该部分时，它不起作用。

document.querySelector('._24tx').scrollTop = document.querySelector('._24tx').scrollHeight

这是我尝试滚动的内容。但该部分不滚动。

这是本节的html代码

 <div class="_24tx" style="height: 143px;">
    <div style="position: absolute; height: 80px; width: 100%; pointer-events: auto; transform: translate(0px, 0px);">
        <div class="_4k8w _8gcz _75ux _5_n1 _284c _5m10" role="presentation">
            <div class="_6yv6 clearfix _ikh">
                <div class="_11eh _4bl7">
                    <div class="_5m0- _5m10" style="width: 40px; height: 40px;"><img class="_1-3q img" height="40"
                            src="https://scontent.fdac6-1.fna.fbcdn.net/v/t1.0-1/p100x100/80994426_155703309073913_5851419077058232320_o.jpg?_nc_cat=108&amp;_nc_sid=7206a8&amp;_nc_eui2=AeF9hYSwS5n7sfQ6UXVP6oNA1WrvDxpHbcPVau8PGkdtw0zvRFSJU0BwcRn-PqdKW_4&amp;_nc_ohc=imbT4oyNr9sAX-T-FeN&amp;_nc_ht=scontent.fdac6-1.fna&amp;_nc_tp=6&amp;oh=f122e376389993a39af8755993a1d10d&amp;oe=5F3DE7AE"
                            width="40" alt="">
                        <div class="_5m17">
                            <div class="_5m18"></div>
                        </div>
                    </div>
                </div>
                <div class="_4bl9">
                    <div class="_284g _4bl9">
                        <div class="_4k8x">
                            <div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
                                <span>Tiffany Hwang</span></div>
                        </div>
                        <div class="_4k8y">
                            <div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
                                <span><span>Hello</span></span></div>
                        </div>
                    </div>
                    <div class="_11ei _4bl7">
                        <div class="">
                            <div class="_4ugl">
                                <div class="_5hhj"><span class="accessible_elem">Today</span><abbr aria-hidden="true"
                                        class="timestamp" title="Today">8:31 PM</abbr></div>
                            </div>
                            <div class="_4a51" role="grid" tabindex="-1"><a href="#">
                                    <div data-tooltip-content="Move to Done" data-hover="tooltip"
                                        data-tooltip-position="right" class="_4ocz _2x0y" data-tooltip-delay="2000">
                                        <div class="_18am"></div>
                                    </div>
                                </a><a href="#">
                                    <div data-tooltip-content="Mark as Follow Up" data-hover="tooltip"
                                        data-tooltip-position="right" class="_4ocz _63kh" data-tooltip-delay="2000">
                                        <div class="_63ki"></div>
                                    </div>
                                </a></div>
                        </div>
                    </div>
                    <div direction="left" class="clearfix">
                        <div class="_ohe lfloat"></div>
                        <div class="">
                            <div class="_6yv4">
                                <div class="_3qn7 _61-0 _2fyi _3qng">
                                    <div class="_6yv3" data-tooltip-content="ad_id.6161496302357" data-hover="tooltip">
                                        <div class="_ke0 _4-u2  _4-u8"
                                            style="background-color: rgb(114, 167, 55); border: none;"></div>
                                        ad_id.616...
                                    </div>
                                </div>
                                <div class="_3qn7 _61-0 _2fyi _3qng">
                                    <div class="_6yv3" data-tooltip-content="ad_id.6182848562757" data-hover="tooltip">
                                        <div class="_ke0 _4-u2  _4-u8"
                                            style="background-color: rgb(251, 146, 64); border: none;"></div>
                                        ad_id.618...
                                    </div>
                                </div>
                                <div class="_6yv3">+2 more</div>
                                <div class="_7136"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="position: absolute; height: 80px; width: 100%; pointer-events: auto; transform: translate(0px, 80px);">
        <div class="_4k8w _8gcz _75ux _5_n1 _284c _5m10" role="presentation">
            <div class="_6yv6 clearfix _ikh">
                <div class="_11eh _4bl7">
                    <div class="_5m0- _5m10" style="width: 40px; height: 40px;"><img class="_1-3q img" height="40"
                            src="https://scontent.fdac6-1.fna.fbcdn.net/v/t1.0-1/p100x100/106221023_280175709922712_3201346937707756688_n.jpg?_nc_cat=104&amp;_nc_sid=7206a8&amp;_nc_eui2=AeHJJCuxGcY8uiLUfZlrjzW1rW1uRGedHyytbW5EZ50fLGK3GT0w7vRgfLB7cHKGNEY&amp;_nc_ohc=hciXweYdgVgAX98T_6v&amp;_nc_ht=scontent.fdac6-1.fna&amp;_nc_tp=6&amp;oh=0dc232174a7e0620724bd755e3b7d2b4&amp;oe=5F3B87FC"
                            width="40" alt="">
                        <div class="_5m17">
                            <div class="_5m18"></div>
                        </div>
                    </div>
                </div>
                <div class="_4bl9">
                    <div class="_284g _4bl9">
                        <div class="_4k8x">
                            <div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
                                <span>Farzana Oni</span></div>
                        </div>
                        <div class="_4k8y">
                            <div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
                                <span><span>Hi</span></span></div>
                        </div>
                    </div>
                    <div class="_11ei _4bl7">
                        <div class="">
                            <div class="_4ugl">
                                <div class="_5hhj"><span class="accessible_elem">Today</span><abbr aria-hidden="true"
                                        class="timestamp" title="Today">8:31 PM</abbr></div>
                            </div>
                            <div class="_4a51" role="grid" tabindex="-1"><a href="#">
                                    <div data-tooltip-content="Move to Done" data-hover="tooltip"
                                        data-tooltip-position="right" class="_4ocz _2x0y" data-tooltip-delay="2000">
                                        <div class="_18am"></div>
                                    </div>
                                </a><a href="#">
                                    <div data-tooltip-content="Mark as Follow Up" data-hover="tooltip"
                                        data-tooltip-position="right" class="_4ocz _63kh" data-tooltip-delay="2000">
                                        <div class="_63ki"></div>
                                    </div>
                                </a></div>
                        </div>
                    </div>
                    <div direction="left" class="clearfix">
                        <div class="_ohe lfloat"></div>
                        <div class="">
                            <div class="_6yv4">
                                <div class="_3qn7 _61-0 _2fyi _3qng">
                                    <div class="_6yv3" data-tooltip-content="ad_id.6195306188957" data-hover="tooltip">
                                        <div class="_ke0 _4-u2  _4-u8"
                                            style="background-color: rgb(251, 146, 64); border: none;"></div>
                                        ad_id.619...
                                    </div>
                                </div>
                                <div class="_3qn7 _61-0 _2fyi _3qng">
                                    <div class="_6yv3" data-tooltip-content="messenger_ads" data-hover="tooltip">
                                        <div class="_ke0 _4-u2  _4-u8"
                                            style="background-color: rgb(114, 167, 55); border: none;"></div>
                                        messenger...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="_5-dk">
        <div class="_1t0r _1t0s _4jdr" tabindex="0" style="top: 0px; height: 143px; z-index: 99;">
            <div class="_1t0w _1t0z _1t0_" style="height: 22px; transform: translate(0px, 4px);"></div>
        </div>
    </div>
</div>

如何滚动此部分？提前致谢。

【问题讨论】：

标签： javascript node.js web-scraping automation puppeteer

【解决方案1】：

Element.scrollIntoView 完成这项工作。它有一个可选的block 参数，可以设置为start、center、end 或nearest。应该使用滚动到元素{ block: 'end' } 的底部：

await page.evaluate(() => {
   document.querySelector('._24tx').scrollIntoView({ block: 'end' }));
});

【讨论】：

@theDvaidBarton 我不想专注于 div 我想滚动到 div 的底部。它是可滚动的，拥有数百万个条目。
嗨@coolsaint，抱歉，您的问题并不清楚您需要滚动到元素底部。 Element.scrollIntoView 也可以。请参阅我的更新答案。