相关疑难解决方法(0)

鉴于此HTML代码段:

<div id="box" style="overflow:auto; width:200px; height:200px; border:1px solid black;">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
</div>

您(通常)会得到一个带有滚动条的黑盒子,其中包含数字1到30,每个滚动条都在一个新行中.

您可以在该框内向上和向下滚动.

我现在需要的是找出盒子在哪个卷轴位置的可能性.我们只说,每行高15像素,然后向下滚动到数字10,我想得到的结果是数字150(15px*10行).

我在哪里可以找到这个号码？

我手上有简单的JavaScript和jQuery.

我正在使用剪切路径来更改基于背景色的徽标颜色。

除此之外，徽标还根据用户在页面上的垂直位置从上到下滚动。页面顶部=顶部徽标，页面底部=底部徽标等。

不幸的是，当我添加剪切路径时，徽标失去了滚动位置，并且在第一个徽标之后根本不起作用。

有没有解决的办法？同样，徽标位置从一开始就有点偏离，因此，如果有任何一种方法可以同时解决这个问题。

您可以在此处看到原始问题： 基于滚动位置的div位置

我已经尝试过了，但是似乎无法正常工作。

隐藏div时滚动位置丢失

我使用的是“高级自定义字段”，每个部分的PHP文件在标头中都有此标记，作为剪切路径的一部分，相应地使用了白色或深色徽标。它的父母位置相对，孩子绝对。

div class="logo-scroll">
        <div class="scroll-text">
                    <a href="/home"><img width="53px" height="260px" src="/wp-content/uploads/2019/07/sheree-walker-web-design-edinburgh-vertical-01.svg"/></a>
       </div>
</div>  

Javascript

const docHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
const logo = document.querySelector('.scroll-text');
const logoHeight = logo.offsetHeight;
// to get the pseudoelement's '#page::before' top we use getComputedStyle method
const barTopMargin = parseInt(getComputedStyle(document.querySelector('#page'), '::before').top);

let viewportHeight, barHeight, maxScrollDist, currentScrollPos, scrollFraction;

logo.style.top = barTopMargin + 'px';

window.addEventListener('load', update);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);

setSizes();


function update() {
    currentScrollPos = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    scrollFraction = currentScrollPos / (docHeight …