自定义滚动条，控制内容的拖动，可以让文字在限定的里面拖动。。。
标签？
标签？
设置一个最大宽度，然后overflow-x：scroll
<!DOCTYPE html>
<br> #parent {<br> width: 20px;<br> height: 300px;<br> border: 1px solid black;<br> position: relative;<br> float:left;<br> }<br> #div1 {<br> width: 20px;<br> height: 20px;<br> background: yellow;<br> position: absolute;<br> }<br> #div2 {<br> border: 1px solid red;<br> width: 300px;<br> height: 300px;<br> float: left;<br> position:relative;<br> overflow: hidden;<br> }<br> #content {<br> position:absolute;<br> top:0;<br> }<br>
<br> function getPos(ev){<br> var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;<br> var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;<br> return {<br> x: ev.clientX + scrollLeft,<br> y: ev.clientY + scrollTop<br> }<br> }<br> window.onload = function(){<br> var oDiv = document.getElementById("div1");<br> var oDiv2 = document.getElementById("div2");<br> var oParent = document.getElementById("parent");<br> var oContent = document.getElementById("content");<br> var disY = 0;<br> oDiv.onmousedown = function(ev){<br> var oEvent = ev || event;<br> var pos = getPos(oEvent);<br> disY = pos.y - oDiv.offsetTop;//<br> console.log("pos.y: " + pos.y + " oDiv.offsetTop: " + oDiv.offsetTop + " disY: " + disY);<br> document.onmousemove = function(ev){<br> var oEvent = ev || event;<br> var pos = getPos(oEvent);<br> var t = pos.y - disY;<br> if(t < 0){<br> t = 0;<br> } else if(t > oParent.offsetHeight - oDiv.offsetHeight - 2){<br> t = oParent.offsetHeight - oDiv.offsetHeight - 2;<br> }<br> oDiv.style.top = t + "px";<br> console.log("t : " + t);<br> var scale = t / (oParent.offsetHeight - oDiv.offsetHeight);//左边变化距离除左边最大距离，范围为0~1<br> oContent.style.top = (oDiv2.offsetHeight - oContent.offsetHeight)*scale + "px";<br> };<br> document.onmouseup = function(ev){<br> document.onmousemove = null;<br> document.onmouseup = null;<br> };<br> return false;<br> };<br> };<br>
offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标 返回第一个匹配元素的偏移坐标。 该方法返回的对象包含两个整型属性:top 和 left,以像素计...offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标 返回第一个匹配元素的偏移坐标。 该方法返回的对象包含两个整型属性:top 和 left,以像素计...
www.w3school.com.cn/jq... - 百度快照offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标 返回第一个匹配元素的偏移坐标。 该方法返回的对象包含两个整型属性:top 和 left,以像素计...
www.w3school.com.cn/jq... - 百度快照offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标 返回第一个匹配元素的偏移坐标。 该方法返回的对象包含两个整型属性:top 和 left,以像素计...
www.w3school.com.cn/jq... - 百度快照www.w3school.com.cn/jq... - 百度快照
<!DOCTYPE html>
<br> #parent {<br> width: 20px;<br> height: 300px;<br> border: 1px solid black;<br> position: relative;<br> float:left;<br> }<br> #div1 {<br> width: 20px;<br> height: 20px;<br> background: yellow;<br> position: absolute;<br> }<br> #div2 {<br> border: 1px solid red;<br> width: 300px;<br> height: 300px;<br> float: left;<br> position:relative;<br> overflow: hidden;<br> }<br> #content {<br> position:absolute;<br> top:0;<br> }<br>
<br> function getPos(ev){<br> var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;<br> var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;<br> return {<br> x: ev.clientX + scrollLeft,<br> y: ev.clientY + scrollTop<br> }<br> }<br> window.onload = function(){<br> var oDiv = document.getElementById("div1");<br> var oDiv2 = document.getElementById("div2");<br> var oParent = document.getElementById("parent");<br> var oContent = document.getElementById("content");<br> var disY = 0;<br> oDiv.onmousedown = function(ev){<br> var oEvent = ev || event;<br> var pos = getPos(oEvent);<br> disY = pos.y - oDiv.offsetTop;//<br> console.log("pos.y: " + pos.y + " oDiv.offsetTop: " + oDiv.offsetTop + " disY: " + disY);<br> document.onmousemove = function(ev){<br> var oEvent = ev || event;<br> var pos = getPos(oEvent);<br> var t = pos.y - disY;<br> if(t < 0){<br> t = 0;<br> } else if(t > oParent.offsetHeight - oDiv.offsetHeight - 2){<br> t = oParent.offsetHeight - oDiv.offsetHeight - 2;<br> }<br> oDiv.style.top = t + "px";<br> console.log("t : " + t);<br> var scale = t / (oParent.offsetHeight - oDiv.offsetHeight);//左边变化距离除左边最大距离，范围为0~1<br> oContent.style.top = (oDiv2.offsetHeight - oContent.offsetHeight)*scale + "px";<br> };<br> document.onmouseup = function(ev){<br> document.onmousemove = null;<br> document.onmouseup = null;<br> };<br> return false;<br> };<br> };<br>
offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标 返回第一个匹配元素的偏移坐标。 该方法返回的对象包含两个整型属性:top 和 left,以像素计...offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标 返回第一个匹配元素的偏移坐标。 该方法返回的对象包含两个整型属性:top 和 left,以像素计...
www.w3school.com.cn/jq... - 百度快照offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标 返回第一个匹配元素的偏移坐标。 该方法返回的对象包含两个整型属性:top 和 left,以像素计...
www.w3school.com.cn/jq... - 百度快照offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。返回偏移坐标 返回第一个匹配元素的偏移坐标。 该方法返回的对象包含两个整型属性:top 和 left,以像素计...
www.w3school.com.cn/jq... - 百度快照www.w3school.com.cn/jq... - 百度快照