Question

我使用的是自定义光标，但是当它位于页面底部时，它会扩大页面的高度。有办法防止这种情况吗？

我尝试使用Javascript获取页面的初始高度，然后将max-height设置为正文，但这不起作用。

要测试此问题，可以选中此codepen并将光标移到窗口底部，您将看到滚动条展开。

编辑：我在整个页面上使用自定义光标，它必须具有滚动页面的功能，但是一旦位于页面底部，光标就不应展开。 >

编辑2：这是我的布局：

<body>
    <div class="cursor-fix"> <!-- the wrapper to fix the problem -->
        <header></header>
        <div class="content"></div>
        <footer></footer>
    </div>
</body>

Answer 1

position: ~~absolute~~ fixed
self.endY = ~~e.pageY~~ e.pageY - window.scrollY

Demo。这对您有用吗？

Answer 2

将overflow: hidden添加到html样式中。这将阻止它添加滚动功能。

添加了样式的笔：

https://codepen.io/anon/pen/aMqqbq

Answer 3

如果我的理解正确，您希望人们能够正常使用该光标，但是目前，当光标到达页面底部时，圆圈的下半部分会导致页面尺寸变大。

在这种情况下，请将页面包装在具有overflow: hidden的容器中，但要使该容器使用页面的整个高度（取决于页面的布局，如果您提供完整的页面布局，我可以更具体地说明如何操作）。这样，他们可以使用body元素的溢出来滚动浏览页面，但是不能更改“光标”容器的大小，因为它的溢出设置为隐藏。

如果您可以固定大小，那么还可以给height和<html>赋予overflow:hidden值。

编辑：我编辑了您的codepen以显示我的意思，请注意，我编辑脚本时使用的是CSS转换而不是绝对定位，否则无法正常工作

防止自定义光标扩展页面

3 个答案: