模拟获得input的scrollLeft

来源：互联网发布：零基础java 编辑：程序博客网时间：2024/04/30 08:19

在webkit内核中。直接可以获得input框的滚动条宽度.用input.scrollLeft;在firefox和opera的等浏览器取得该值一直为0。所以采用一种模拟的方法来获得这个值。

立方图片分享

首先是上边的input

<input id="i1" style="width:100px;" />

下边是一个模拟的外层div里边有一个span.样式宽度边框等和上边的input一致。

<div id="simu-wrap" style="width:100px;position:absolute;overflow-x:scroll;padding: 1px 0px;border: 2px inset;"><span id="s1"></span></div>

当在input框中按左键或者鼠标往左移的时候就该input的scrollLeft就会减少. 这时需要判断s1的offsetWidth是不是比上次的oldScroll值要小.小的话说明往左滚动了。思路是把input框里边的内容放到s1的span里。然后获得外层div的scrollLeft. 由于该div的滚动条默认是最左边。需要给该div设置一个大的scrollLeft值. 例如 $(“simu-wrap”).scrollLeft =100; 再取就能取到该div的实际scrollLeft值。这样就能获得该input框不断向右的scrollLeft值。

这样就可以通过div+span模拟得到input的scrollLeft了。

var sl = 0,oldScroll= 0;
//模拟实现
function simu() {var str = this.value,l = this.selectionStart, //得到input光标开始位置s = str.substring(0,l-1); //光标之前的字符串//全选后滚动条不变化if(this.selectionStart == 0 && this.selectionEnd == str.length)return;$("s1").innerHTML = s;//文字超出输入框的右边界$("simu-wrap").scrollLeft = 1000;var simScrollLeft = $("simu-wrap").scrollLeft;if(simScrollLeft > sl ) {sl = simScrollLeft;}//移到左边隐藏的文字处leftHideWidth = $("s1").offsetWidth;if(leftHideWidth <= oldScroll ) {sl = leftHideWidth;}console.log("滚动条值: " + sl);oldScroll = sl;}下边是监听$("i1").onclick = function(e) {simu.call(this);};$("i1").onkeyup = function(e) {simu.call(this);};
文章作者：