防止滚动从元素滚动到窗口

防止滚动从元素滚动到窗口 使用简单的CSS属性解决了（对于 某些 浏览器）：overscroll-behavior

body{  height: 600px;  overflow: auto;}section{  width: 50%;  height: 50%;  overflow: auto;  background: lightblue;  overscroll-behavior: none; }section::before{  content: '';  height: 200%;  display: block;}<section> <input value='end' /></section>

只需将样式属性应用到滚动应该“锁定”到的元素上，滚动事件就不会冒泡到任何可能具有滚动的父元素。

---

与上面相同的演示，但 没有 技巧：

body{  height: 600px;  overflow: auto;}section{  width: 50%;  height: 50%;  overflow: auto;  background: lightblue;}section::before{  content: '';  height: 200%;  display: block;}<section> <input value='end' /></section>