当单击复选框时，如何防止浏览器在页面顶部滚动？ [英] How can I prevent the browser from scrolling on top of the page when clicking the checkbox?
问题描述
每当我点击复选框，浏览器窗口（firefox）将在屏幕顶部滚动。
如何防止此行为，所以当我点击复选框，浏览器窗口不会在顶部滚动？
这里是从这里找到的代码 http://jsfiddle.net/ zAFND / 6 /
谢谢。
< html&
< head>
< title> Test< / title>
< style>
div标签输入{
margin-right：100px;
}
body {
font-family：sans-serif;
}
＃ck-button {
margin：4px;
background-color：#EFEFEF;
border-radius：4px;
border：1px solid＃D0D0D0;
overflow：auto;
float：left;
}
＃ck-button {
margin：4px;
background-color：#EFEFEF;
border-radius：4px;
border：1px solid＃D0D0D0;
overflow：auto;
float：left;
}
＃ck-button：hover {
margin：4px;
background-color：#EFEFEF;
border-radius：4px;
border：1px solid red;
overflow：auto;
float：left;
color：red;
}
＃ck-button label {
float：left;
width：4.0em;
}
＃ck-button label span {
text-align：center;
padding：3px 0px;
display：block;
}
＃ck-button标签输入{
position：absolute;
top：-20px;
}
＃ck-button input：checked + span {
background-color：＃911;
color：#fff;
}
< / style> ;,
< / head>
< body>
< br>
< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br& >< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br> < br>< br>< br>
< div id =ck-button>
< label>
< input type =checkboxvalue =1>< span>红色< / span>
< / label>
< / div>
< / body>
问题是这个规则：
＃ck按钮标签输入{
position：absolute;
top：-20px;
}
当您单击标签时，浏览器会尝试对相关输入进行聚焦。在您的情况下，checkbox元素位于页面的顶部，即使在视口的外部。
我想你可以这样解决：
＃ck-button label {
display：block;
position：relative;
overflow：hidden;
}
演示
编辑
今天我回来回答这个问题，以及 Heisenberg的：他指出了一个问题，可以通过使用极端值，并增加了另一个解决方案，基本上有同样的怪癖与我的发生。
可能的怪癖，这里是另一个可能的解决方案，通过简单地隐藏输入。
$ b
＃ck-button label input {
display：none;
}
演示
Whenever I click on the checkbox, the browser window (firefox) will scroll on the top of the screen.
How can I prevent this behavior so when I click on the checkbox the browser window will not scroll on top?
Here is the code found from here http://jsfiddle.net/zAFND/6/
Thank you.
<html>
<head>
<title>Test</title>
<style>
div label input {
margin-right: 100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button:hover {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
#ck-button label {
float: left;
width: 4.0em;
}
#ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#ck-button label input {
position: absolute;
top: -20px;
}
#ck-button input:checked + span {
background-color: #911;
color: #fff;
}
</style>
</head>
<body>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
</body>
The problem is this rule:
#ck-button label input {
position:absolute;
top:-20px;
}
When you click on a label the browser tries to focus the related input. In your case the checkbox element is lying at the top of the page, even on the outside of the viewport. So Firefox tries to scroll there.
I think you can solve it like this by adding:
#ck-button label {
display: block;
position: relative;
overflow: hidden;
}
Demo
Edit
As I came back to this answer today and in regard of Heisenberg's: He points out a problem that can occur by using extreme values and adds another solution which basically has the same quirk as mine.
To avoid those possible quirks, here's another possible solution by simply hidding the input. The functionality is not affected, as you can test in the link below.
CSS
#ck-button label input {
display: none;
}
Demo
这篇关于当单击复选框时，如何防止浏览器在页面顶部滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
