个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
在 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/
24
4
0
我有一个 ASP.NET 网站，我希望只允许 AD 组中的用户访问该网站。我正在使用如下的 web.config 片段，但这似乎不起作用:
仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮
当前有一个Navigator.push(context，route)，但是上下文部分返回了错误，在尝试调试后，我发现问题是因为我在调用一个函数而不是直接将home设置为widget树。但是现在我不确定
这是我的邮政编码正则表达式 ^[a-zA-Z0-9]{1,9}$ 但不允许 A-12345。如何更改 - 也将被允许的正则表达式？ 最佳答案 在字符集的开头或结尾添加-([...]): ^[-a-zA
我目前正在建立我的网站，但遇到了一个问题 JavaScript 中的混合内容阻止 当我尝试加载和显示来自 的图像和页面时，Chrome、Mozilla 和 Explorer 会发生这种情况http 我
我见过使用: [mysqld] bind-address = 255.112.324.12 允许远程访问单个 IP。我如何允许从 mysql 远程访问所有 IP？ 最佳答案 如果你想允许它用于所
我想知道是否可以使用模板实现某些功能。我想要做的是允许特定的“复制构造函数和赋值运算符”从一个模板到另一个模板并禁用其他模板。 我想我只完成了一件我想要的事情，所以我提供了下面的类(class)。对于
这个问题在这里已经有了答案: How to validate an email address in PHP (15 个答案) 关闭 2 年前。 正则表达式让我大吃一惊。我如何更改此设置以验证带有加
解析可以采用以下格式之一的日期的最佳方法是什么 "dd-MM-yyyy HH:mm" "dd/MM/yyyy HH:mm" "dd.MM.yyyy HH:mm" 无需创建 3 个 SimpleD
我们知道，下面的代码格式不正确，因为成员 x 在依赖的基类中。但是，将指定行上的 x 更改为 this->x 将修复错误。 template struct B { int x; }; tem
如果能帮助我理解“Java 并发实践”中的以下内容，我将不胜感激: Calling an overrideable instance method(one that is neither privat
此时如果上传一个不在预定义的安全扩展名列表，如.lrc，会报错： File type does not meet security guidelines. Try another. 解决此问题有
我有一个运行韵律，可以为我的几个域和一个 friend 域处理 XMPP。我 friend 域中的一位用户(他的妻子)想更改她的密码(实际上她忘记了她，所以我会用 prosodyctl 设置一个，然后
使用 nginx，您可以允许和拒绝范围和 ips (https://www.nginx.com/resources/admin-guide/restricting-access/)。使用realip模
什么是一些好的克里金法/插值想法/选项，可以让重度权重的点在绘制的 R map 上的轻权重点上流血？ 康涅狄格州有八个县。我找到了质心并想绘制这八个县中每个县的贫困率。其中三个县人口稠密(约 100
我正在使用 virtualbox + ubuntu + vagrant . 但是我不能ping或 wget任何网址。请指导我如何允许虚拟机访问我的主机的互联网？ 最佳答案 这对我有用。 使用此配置 V
标题可能有点令人困惑，所以让我向您解释一下。 在 Swift 中，我们可以拥有带有默认参数值的函数，例如: func foo(value: Int = 32) { } 我们也可以有 In-Out 参数
有TextView1 和TextView2。 TextView2 应该 float 在 TextView1 的右侧。只要两个 TextView 的总宽度不使 TextView2 与右侧的框重叠，Tex
使用 Magento 收集方法 addFieldToFilter 时是否可以允许按 NULL 值进行过滤？我想选择集合中具有自定义属性的所有产品，即使没有为该属性分配任何值。 最佳答案 您不需要使用
我正试图从 .htaccess 文件中的规则中“排除”一个目录(及其所有文件夹)... 不确定这是否可能？ .htaccess 文件是这样的: Order Allow,Deny Deny from a
我是一名优秀的程序员,十分优秀！