Question

我的基本想法是制作一个“窗口框架”以容纳一些内容。

这是我的问题：我在不可滚动元素下面有一个可滚动元素，并且我希望能够通过滚动不可滚动元素来滚动不可滚动元素。

我尝试过几种实现方式：我尝试在CSS中使用border-image，但是框架窗口图像不断变形，这不是我想要的...

我尝试将窗口框架作为window div的背景，但是它不允许我将窗口放置在我的内容周围+该框架将位于我不想要的内容之下，因为其中包含装饰应该位于内容上方的框架。

最后，我将框架作为标签放置在内容标签上方，可以将其放置在所需的任何位置，但是现在我无法滚动内容图像。

以下是我的代码：

HTML：

<div id="window">
  <div id="content">
    <img id="windowframe" src="https://images.unsplash.com/photo-1480419657797-45303e551e19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=639&q=80" alt="alternative text" height="586.875" width="375">
    <img id="scrollablecontent" src="https://images.unsplash.com/photo-1565619624098-cf4168a7cd9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1575&q=80" alt="other alternative text" height="1134px" width="756px">
  </div>
</div>

CSS：

#window {
  width: 756px;
  height: 60vh;
  }
#content {
  overflow-y: scroll;
  width: 756px;
  height: 60vh;
  overflow-x: hidden;
  }
#windowframe {
   position: absolute;
   left: 10vw;
   z-index: 1;
   height: 586.875px;
   width: 375px;
   }
 #scrollablecontent {
   height: 1134px;
   width: 756px;
 }

这是我尝试使用jQuery的方法（在其他带有on（“ scroll”，function（）），scroll（function（））的变体中）可以帮助我滚动要滚动的元素：

$(document).ready(function () {
  $('#windowframe').onscroll = function () {
    $('#scrollablecontent').scrollTop = $('#scrollablecontent').scrollTop + 50;
  }
})

如果您去摆弄小提琴，您会看到在“ scrollablecontent”图像（带有很多红色的图像）上滚动时，它会毫无问题地滚动。但是，当您将鼠标放在“ windowframe”图像（带有窗口的窗口，“ scrollablecontent”图像不滚动。我的真实框架在中间是透明的，是SVG（内容是JPEG），并按照内容的大小整齐地放置和缩放。 / p>

预期结果是围绕可滚动内容和可滚动内容的窗口框架，当用户用鼠标向下滚动时，滚动窗口将滚动。

感谢任何可以提供帮助的人！

本杰明

编辑：显然，我链接了一个不良的JS小提琴，我编辑了链接，以便现在它链接到一个好的JS

。

使元素滚动到另一个元素的滚动条上

0 个答案: