HTML-在移动设备上使用水平滚动复选框时防止整个页面在单击上移动-堆栈溢出

顺晟科技

2022-10-19 11:46:26

140

我使用Overflow：auto和Whitespace：nowrap创建了一个水平滚动的div，并在其中放置了一些自定义样式的复选框，并内联显示。我遇到的问题是，当我在移动屏幕上滚动到一个复选框的末尾时，整个页面会移动并移出视野。如何修复？

<html>
  <ul class="ks-cboxtags" id="topic_sec_container" style="display: block;">
            <li><input name="topic_secondary" type="checkbox" value="Study Melbourne" id="checkboxOne" checked=""><label for="checkboxOne">Study Melbourne</label></li>
            <li><input name="topic_secondary" type="checkbox" value="City of Melbourne" id="checkboxTwo"  checked=""><label for="checkboxTwo">City of Melbourne</label></li>
            <li><input name="topic_secondary" type="checkbox" value="Cultural" id="checkboxThree"  checked=""><label for="checkboxThree">Cultural</label></li>
            <li><input name="topic_secondary" type="checkbox" value="Professional development" id="checkboxFour" checked=""><label for="checkboxFour">Professional development</label></li>
            <li><input name="topic_secondary" type="checkbox" value="Employment" id="checkboxFive"  checked=""><label for="checkboxFive">Employment</label></li>
            <li><input name="topic_secondary" type="checkbox" value="Insider Guides" id="checkboxSix"  checked=""><label for="checkboxSix">Click this</label></li>
</ul>
</html>

<style>
/* custom checkboxes */
ul.ks-cboxtags {
    list-style: none;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    
    margin: 16px 0 0 0;
}



/* .ks-cboxtags::-webkit-scrollbar {
    display: none;
} */

ul.ks-cboxtags li{
    display: inline;
}
ul.ks-cboxtags li label{
    display: inline-block;
    background-color: none;
    color: var(--blue);
    border: 2px solid blue;
    border-radius: 100px;
    white-space: nowrap;
    margin: 0px 3px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}

ul.ks-cboxtags li label {
    /* padding: 8px 12px; */
    font-size: 18px;
    padding: 9px 16px;
    cursor: pointer;
}



ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
    
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 2px solid blue;
    background-color: blue;
    color: white;
    transition: all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
</style>

顺晟科技：

好吧，经过很多努力，我想我明白了为什么会发生这样的事情:

对于输入[type=“checkbox”]，我使用绝对和不透明度为0的位置来隐藏刻度框。我将其替换为display：none并且它起作用了。

<html>
  <ul class="ks-cboxtags" id="topic_sec_container" style="display: block;">
            <li><input name="topic_secondary" type="checkbox" value="Study Melbourne" id="checkboxOne" checked=""><label for="checkboxOne">Study Melbourne</label></li>
            <li><input name="topic_secondary" type="checkbox" value="City of Melbourne" id="checkboxTwo"  checked=""><label for="checkboxTwo">City of Melbourne</label></li>
            <li><input name="topic_secondary" type="checkbox" value="Cultural" id="checkboxThree"  checked=""><label for="checkboxThree">Cultural</label></li>
            <li><input name="topic_secondary" type="checkbox" value="Professional development" id="checkboxFour" checked=""><label for="checkboxFour">Professional development</label></li>
            <li><input name="topic_secondary" type="checkbox" value="Employment" id="checkboxFive"  checked=""><label for="checkboxFive">Employment</label></li>
            <li><input name="topic_secondary" type="checkbox" value="Insider Guides" id="checkboxSix"  checked=""><label for="checkboxSix">Click this</label></li>
</ul>
</html>

<style>
/* custom checkboxes */
ul.ks-cboxtags {
    list-style: none;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    
    margin: 16px 0 0 0;
}



/* .ks-cboxtags::-webkit-scrollbar {
    display: none;
} */

ul.ks-cboxtags li{
    display: inline;
}
ul.ks-cboxtags li label{
    display: inline-block;
    background-color: none;
    color: var(--blue);
    border: 2px solid blue;
    border-radius: 100px;
    white-space: nowrap;
    margin: 0px 3px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}

ul.ks-cboxtags li label {
    /* padding: 8px 12px; */
    font-size: 18px;
    padding: 9px 16px;
    cursor: pointer;
}



ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
    
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 2px solid blue;
    background-color: blue;
    color: white;
    transition: all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
</style>

上一篇：JavaScript-HTML5音频下一篇：html-如何将图标添加到文本输入字

网站建设

Html

HTML-在移动设备上使用水平滚动复选框时防止整个页面在单击上移动-堆栈溢出