Question

我正在尝试创建一个滑块，但发现如果用户使用 CTRL + F ，则位置和<div>元素＆＃39;偏移量发生了变化，因此滑块不再适用。

HTML：

<div style="width:100px; height:150px;">
    <div style="width:100px; height:100px; overflow:hidden;">
        <div id="slider" style="width:200px; height:100px; right:0; position:relative;">
            <div style="width:100px; height:100px; float:left;">visible</div>
            <div style="width:100px; height:100px; float:left;">hidden</div>
        </div>
    </div>
    <input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
    <input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
</div>

JavaScript （jQuery）：

$(document).ready(function() { 
    $("#sliderbuttonnext").click(function(){
        $("#slider").animate({right:"+=100px"});
    });
    $("#sliderbuttonprev").click(function(){
        $("#slider").animate({right:"-=100px"});
    });
});

有没有办法阻止 CTRL + F 找到隐藏的部分？

jsFiddle Demo

Answer 1

您无法阻止浏览器查找隐藏的内容，但您可能会为幻灯片禁用它。

例如，如果您在CSS中指定内容，则浏览器不会移动内容。例如，请参见此处＆gt; Is it possible to disable Ctrl + F of find in page?

<div class="word-foobar"></div>

.word-foobar:before {
    content: "Foobar";
}

正如nickf所建议的那样，您可以轻松编写一些JavaScript代码来将实际文本转换为此方法。

Answer 2

http://jsfiddle.net/TaZL2/2/

如果您将动画更改为marginLeft而不是right属性，则搜索时内容似乎不会滚动。（Chrome / Mac OSX）

然而，用户仍然会看到匹配并且难以接受它的位置。

 $("#sliderbuttonnext").click(function () {
     $("#slider").animate({
         marginLeft: "-=100px"
     });
 });
 $("#sliderbuttonprev").click(function () {
     $("#slider").animate({
         marginLeft: "+=100px"
     });
 });

Answer 3

我提出了一个解决方案，它使用一个变量来跟踪主包装div的位置，并隐藏“.hide（）”不可见的内容div。隐藏内容对ctrl f。

不可见

<强> HTML：

<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
    <div id="slider" style="width:200px; height:100px; right:0; position:relative;">
        <div style="width:100px; height:100px; float:left;">
            <div id="id1">visible</div>
        </div>
        <div style="width:100px; height:100px; float:left;">
            <div id="id2">hidden</div>
        </div>
    </div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">

<强> JQuery的

<script>
var pos = 0;
function showfunct(x){
   if(x==0)$("#id1").show();
   if(x==100)$("#id2").show();
}

function hidefunct(x){
   if(!(x==0))$("#id1").hide();
   if(!(x==100))$("#id2").hide();
}
showfunct(pos);
hidefunct(pos);
$(document).ready(function() { 

$("#sliderbuttonnext").click(function(){
    pos+=100;
    showfunct(pos);
    $("#slider").animate({right:"+=100px"});
    $("#slider").promise().done(function(){
        hidefunct(pos);
    });
});
$("#sliderbuttonprev").click(function(){
    pos-=100;
    showfunct(pos);
    $("#slider").animate({right:"-=100px"});
    $("#slider").promise().done(function(){
        hidefunct(pos);
    });
});
}); 
</script>

CTRL + F移动溢出：隐藏<div> </div>

3 个答案: