javascript - 如何滚动一个你不专注于使用jQuery的元素？

Question

Pinterest和 9gag 的快速版本等网站是如何做到这一点的：

在 Pinterest 上，如果您单击任何图像并获得模态框，您会注意到在页面上的任何位置滚动会导致模态框而不是主文档滚动。

在 9gag 上，如果您滚动评论部分以外的任何地方，滚动的是左侧的主要内容区域。

无论哪种情况，您都不必专注于要滚动的区域。即使您的鼠标不在您要滚动的区域内，只要在任何地方滚动，都会导致该区域被滚动。

他们如何做到这一点？例如，如何禁用主文档上的滚动并导致页面上的某些 div 在它的位置滚动？

Answer 1

在 Pinterest 上，当一个模式打开时，一个“noscroll”类被添加到<body/>：

.noscroll {overflow: hidden !important;}

这可以防止body滚动。模态本身的 id 为“zoomscroll”，其中包含以下内容：

overflow-y: scroll;

因此，当body冻结时，#zoomscroll可以滚动溢出。

在此处查看演示：http: //jsbin.com/ucacon/2/edit — 单击任何段落以冻结正文，并启用段落本身的滚动。

Answer 2

这是他们在模态框上的实际 CSS。

#zoomScroll {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    background-color: rgba(255, 255, 255, 0);
    overflow-x: auto;
    -y: scroll;
    -webkit-perspective: 1000;
}

加上 body 类 noscroll 使它工作。

.noscroll {overflow: hidden !important;}