在 padding-top:25px
和 position:relative
的 div 中,有一个 div
和 class='mydiv '
包含带有 position:absolute
的 span
和几个其他元素 .mydiv
具有有限的 height
和一个 overflow-y 设置为 auto
。 span
使用 top:0px
超出 div
。当我们向下滚动 .mydiv
,然后单击 span
时,.mydiv
会向上滚动,原因不明。 这是不需要的。我怎样才能防止这种情况发生,同时允许 span
为我的 javascript 监听其他事件?
这是问题的片段:
<!DOCTYPE html>
<html>
<head>
<style>
.mydiv {
border: 1px solid black;
height: 100px;
overflow-y: auto;
}
.container {
padding-top: 25px;
position: relative;
}
.event {
position: absolute;
top:0;
border: solid 2px black;
color: red;
}
.event:hover {
cursor:pointer;
}
</style>
<script>
function myevent() {
console.log('Event triggered');
}
</script>
</head>
<body>
<div class="container">
<div class="mydiv">
<span class="event" type="button" onClick='myevent();'>CLICK ME EVENT LISTENER (scroll down before) </span>
Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
</div>
</div>
<p>For some reason, this html code has to keep this structure. When the user click of event listener, the div should not scroll up.</p>
</body>
</html>
最佳答案
这是我使用这两个按钮实现的。
你的问题离不开 jquery scrollTop 函数
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function event1() {
console.log('Event triggered');
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault;
}
function event2() {
console.log('Event triggered');
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = null;
}
<!DOCTYPE html>
<html>
<head>
<style>
.mydiv {
border: 1px solid black;
height: 100px;
overflow-y: auto;
}
.container {
padding-top: 25px;
position: relative;
}
.event {
position: relative;
top:0;
border: solid 2px black;
color: red;
}
.event1 {
position: relative;
border: solid 2px black;
color: red;
}
.event1:hover {
cursor:pointer;
}
.event2:hover {
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
<span class="event1" type="button" onClick='event2();'>CLICK ME to enable scrolling (scroll down before) </span>
<div class="mydiv">
Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
</div>
<span class="event2" type="button" onClick='event1();'>CLICK ME to disable scrolling (scroll down before) </span>
</div>
<p>For some reason, this html code has to keep this structure. When the user click of event listener, the div should not scroll up.</p>
</body>
</html>
//完全归属于thread以及里面的作者
关于html - 如何防止默认 Css 滚动 onclick 并仅允许 javascript 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40208128/