文章/答案/技术大牛

发布

社区首页 >问答首页 >从不可滚动元素滚动DOM元素

问从不可滚动元素滚动DOM元素
EN

Stack Overflow用户

提问于 2021-05-21 14:53:48

回答 1查看 39关注 0票数 1

我已经做了一个小代码来澄清我的问题：https://codepen.io/valentin-wei/pen/YzZNOKW，当我在页面上的任何地方滚动时，我想滚动内部段落，即使是在不可滚动的div.pageContent上。

所以我需要像这样的东西

domElement.scrollTop += x

但是，根据所使用的浏览器或鼠标设置，"x“似乎有所不同。注意:我不想使用jquery。

有没有办法实现这种行为，让用户有一种“原生”的滚动体验？

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-21 19:59:25

表达式when I scroll anywhere on the page可能是指当您发送一个触发器时，该触发器可能会导致滚动，如wheel事件。如果是这种情况，您可以只使用wheel事件的dy属性：

let el = document.querySelector('p');
window.addEventListener('wheel', function(e){
  let dy = e.deltaY;
  el.scrollTop += dy;
});

* {
  padding: 0;
  margin: 0;
}

.pageContent {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pageContent > p {
  height: 200px;
  width: 200px;
  overflow-x: hidden;
}

<div class="pageContent">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
    </p>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67632104

复制

相似问题

问从不可滚动元素滚动DOM元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从不可滚动元素滚动DOM元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从不可滚动元素滚动DOM元素
EN