遮罩层内的元素滚动时不让遮罩层底下的元素滚动的办法

问题: H5端目录列表的遮罩层在遮挡住文章内容后, 滚动目录列表会引起文章内容的滚动. 想要的效果打开目录列表遮罩层时仅目录列表滚动.
解决办法: 打开遮罩层的时候, 获取body元素的样式, 然后设置position为relative; overflow为hidden; 这样页面就不会滚动了, 但是遮罩层可以滚动, 这里是从张鑫旭的blog知道的, 但是文中说, 如果给body设置了这俩样式属性后, 不管遮罩内的还是遮罩底下的都不会滚动, 但是实际操作发现, 遮罩内的会滚动, 遮罩底下的不会滚动.
拓展:

• 滚动链: 默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。MDN中提供的控制滚动链的css属性是overscroll-behavior, 可以设置三个值
  • auto: 默认值, 表现就是上面所描述的
  • contain: 设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。
  • none: 临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止。
    但是这个属性在我这个项目中没用