【功能建议】Native 页面增加翻页功能

[sheng-di]

No description provided.

[sheng-di]

得益于已有的 webview JS 脚本注入功能，可以在 webview 中注入以下的 JS 脚本，实现回答页面的翻页功能：

function createElementFromHtml(html) {
    var div = document.createElement('div');
    div.innerHTML = html.trim();
    return div.firstChild;
}
// 增加 css 样式
function addStyleElement() {
    const styleText = `
.VoteButtonGroup {
    background: transparent;
}
p {
    font-weight: 950!important;
}

`;
    const styleElement = document.createElement('style');
    styleElement.innerHTML = styleText;
    document.body.appendChild(styleElement);
}

// 变粗
function toggleBold() {}

// 隐藏头像
function hideAvatar() {
    const buttons =  document.getElementsByClassName('Toolbar-functionButtons');
    if (buttons && buttons.length > 0) {
        const buttonGroup = buttons[0];
        buttonGroup.children[buttonGroup.children.length - 1].style.display = 'none';
        // 翻页按钮
        const htmlContent = `<div onclick="scrollPageDown()" class="ToolbarButton ToolbarButton--comment" role="button" aria-label="评论"><div class="ToolbarButton-subtitle" "="" style="
        display: flex;
        align-items: center;
        flex-direction: column;
    "><svg width="14" height="14" viewBox="0 0 24 24" class="ZDI ZDI--OpposeFill24" fill="currentColor"><path fill-rule="evenodd" d="M13.792 20.319c-.781 1.406-2.803 1.406-3.584 0L2.418 6.296c-.76-1.367.228-3.046 1.791-3.046h15.582c1.563 0 2.55 1.68 1.791 3.046l-7.79 14.023Z" clip-rule="evenodd"></path></svg><span class="ToolbarButton-buttonText">翻页</span></div></div>`;
        const button = createElementFromHtml(htmlContent);
        buttonGroup.appendChild(button);
    }
}

// 注入元素和其点击事件
function injectElement() {
    const htmlContent = `<div id="injectedElement" class="VoteButtonGroup VoteButtonGroup--neutral" style="width:140px;display: flex;flex-direction: column;margin-left: 23px;background: transparent;"><div class="NeutralButtonGroup ButtonGroupTransition-appear-done ButtonGroupTransition-enter-done"><button aria-label="赞同，总赞同数5318 " class="NeutralButtonGroup-voteUp" style="
    width: 44px;
" onclick="scrollPageUp()"><span><span style="display:inline-flex;align-items:center">&ZeroWidthSpace;<svg width="14" height="14" viewBox="0 0 24 24" class="ZDI ZDI--AgreeFill24 css-1v994a0" fill="currentColor"><path fill-rule="evenodd" d="M13.792 3.681c-.781-1.406-2.803-1.406-3.584 0l-7.79 14.023c-.76 1.367.228 3.046 1.791 3.046h15.582c1.563 0 2.55-1.68 1.791-3.046l-7.79-14.023Z" clip-rule="evenodd"></path></svg></span> </span></button><span class="NeutralButtonGroup-divider"></span><button aria-label="反对" class="NeutralButtonGroup-voteDown" style="
    width: 95px;
" onclick="scrollPageDown()"><span style="display:inline-flex;align-items:center;margin-right: 10px;">&ZeroWidthSpace;<svg width="14" height="14" viewBox="0 0 24 24" class="ZDI ZDI--OpposeFill24" fill="currentColor"><path fill-rule="evenodd" d="M13.792 20.319c-.781 1.406-2.803 1.406-3.584 0L2.418 6.296c-.76-1.367.228-3.046 1.791-3.046h15.582c1.563 0 2.55 1.68 1.791 3.046l-7.79 14.023Z" clip-rule="evenodd"></path></svg></span>翻页
</button></div></div>`;
    const element = createElementFromHtml(htmlContent);
    // 插入到 .Toolbar-customizedArea 中
    const customizedArea = document.querySelector('.Toolbar-customizedArea');
    customizedArea.appendChild(element);
    hideAvatar();
}

// 相应事件
function scrollPageDown() {
    window.scrollTo({ top: scrollY + innerHeight - 65 })
}

function scrollPageUp() {
    window.scrollTo({ top: scrollY - innerHeight + 65 })
}

function main() {
    addStyleElement();
    injectElement();
    if (!window.__injectElementInterval) {
        window.__injectElementInterval = setInterval(function () {
            if (!document.querySelector('#injectedElement')) {
                injectElement();
            }
        }, 1000);
    }
}
main();

形成的效果为：

点击后就可以整屏幕翻页，在电纸书上使用非常方便，不会有拖动的残影。

问题是，在首页回答列表界面是一个 Native 组件，应该怎样实现类似的 scrollTo 功能呢？

[sheng-di]

@shatyuka Update: 新版已经默认启用了 Native 页面的卡片阅读视图，此种情况下无法通过注入 JS 的方式在 webview 中实现翻页了。

请问可以提供 Native 页面上的相关 scroll Hook 吗？