当前位置:千赢国际官网 > 千赢网页手机版登入 > 区分横向纵向滚动条的方法,javascript实现页面内

区分横向纵向滚动条的方法,javascript实现页面内

文章作者:千赢网页手机版登入 上传时间:2019-07-30

由于项目的需要在一个页面中选择打印内容。

jquery在scroll()事件里面,我想判断当前滚动条横向还纵向;
我开始用全局变量记录scrollTop的值来判断的,如果前后值没有变就是横向滚动了,
但是页面里有多个滚动条,就要多个全局变量来控制,该怎么判断呢?
scroll jquery 区分横向纵向滚动条

复制代码 代码如下:

把自己要打印的东西用一个DIV层抱起来。例如:

解决方法:
each一次设置选择器选中对象的scrollLeft/scrollTop就行了,然后绑定scroll事件,触发的时候获取scrollLeft/scrollTop和初始化的scrollLeft/scrollTop对比判断是横向还是纵向,同时更新对象存储的scrollLeft/scrollTop

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>关键字高亮显示</title>
</head>
<body>
<div class="result" id="textbox">
<p>百度(Nasdaq简称:BIDU)是全球最大的中文搜索引擎,2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的</p>
<p>信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
</div>
<script>
function highlight(idVal, keyword) {
var textbox = document.getElementById(idVal);
if ("" == keyword) return;
//获取所有文字内容
var temp = textbox.innerHTML;
console.log(temp);
var htmlReg = new RegExp("<.*?>", "i");
var arr = new Array();

复制代码 代码如下:

复制代码 代码如下:

//替换HTML标签
for (var i = 0; true; i ) {
//匹配html标签
var tag = htmlReg.exec(temp);
if (tag) {
arr[i] = tag;
} else {
break;
}
temp = temp.replace(tag, "{[(" i ")]}");
}

<!-- 信访事项转办告知单Start -->
<div id="itemVrbjForm" style="font-family:'仿宋','宋体';font-size: 18px; margin-top: 290px;" >
<div style="width: 600px; margin:0 auto;">
<div style="float: right;margin-top: -40px;">(告知单编号:${zjxfItemUser.acceptedNo })</div>
<div id="title" style="margin-top: 40px;" ><span>信访事项转办告知单</span></div>
${zjxfItemUser.userName }:(信访人名称)<br/>
        
<span id="itemVrbjTime"></span>,本机关(或单位)依法受理了你(或你们)提出的${zjxfItemUser.subject }信访事项,
该信访事项属于XXX职权范围内的事项,根据《信访条例》的有关规定,本机关已于XXXX年XX月XX日将有关材料转交给XXX处理,请及时与其联系。<br/>
         特此告知。<br />
<div style="margin-top:50px;margin-right: 20px;float: right;">(盖${zjxfProcessOver.subOrgname }专用章或公章)</div>
<div style="margin-top:90px;margin-right: -190px;float: right;"><span id="itemVrbjEndTime"></span></div>
</div>
</div>
<!-- 信访事项转办告知单End -->

<style>
.c{height:120px;width:120px;overflow:auto;border:solid 1px black;margin-bottom:5px;}
</style>

// 讲关键词拆分并入数组
words = decodeURIComponent(keyword.replace(/,/g, ' ')).split(/s /);

中间有不需要打印了,也用一个DIV层包含起来。利用CSS样式中的。在不需要打印的层中引用class="noprint"就搞定了

<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>

//替换关键字
for (w = 0; w < words.length; w ) {
// 匹配关键词,保留关键词中可以出现的特殊字符
var r = new RegExp("(" words[w].replace(/[(){}. *?^$|\[]]/g, "\$&") ")", "ig");
temp = temp.replace(r, "<b style='color:Red;'>$1</b>");
}

复制代码 代码如下:

<script src="/js/jquery.js"></script>

//恢复HTML标签
for (var i = 0; i < arr.length; i ) {
temp = temp.replace("{[(" i ")]}", arr[i]);
}
textbox.innerHTML = temp;
}
highlight("textbox","百度,李彦宏");
</script>
</body>
</html>

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:区分横向纵向滚动条的方法,javascript实现页面内

关键词: 千赢国际官网