我是javascript的新手.我正在尝试做一个简单的切换div用户选择方向生病放置切换div.经过一些谷歌搜索我发现一个工作小提琴但不如预期看到下面的截图,看看差异
当我在段落的前面选择一些文字它工作正常像这样
但是,当我从底部段落中选择一些文本时,它没有按预期工作
JsFiddle
其实我在React版本工作Fiddle在Jquery
这是我的代码
import React from 'react'
import {render} from 'react-dom';
export default class App extends React.Component{
constructor(props){
super(props);
this.state = {
display:'none',top:'',bottom:'',left:'',right:'',diplayForDown:'none'
};
this.handleOnMouseDown = this.handleOnMouseDown.bind(this)
this.onMounseUp = this.onMounseUp.bind(this)
this.onMouseDwn = this.onMouseDwn.bind(this)
this.triggerAlltime = this.triggerAlltime.bind(this)
}
handleOnMouseDown(){
let sel = window.getSelection && window.getSelection();
let r = sel.getRangeAt(0).getBoundingClientRect();
let relative=document.body.parentNode.getBoundingClientRect();
console.log('Relative ',relative);
if(!sel.isCollapsed){
console.log(sel,r);
let display = 'block';
let top = (r.bottom - relative.top - 80)+'px';
let bottom = r.bottom+'px';
let left =( r.left)+'px';
let right = (r.right)+'px';
console.log('This is Height',r.bottom-r.top);
let selectionHeight = r.bottom - r.top;
if(selectionHeight => 22.22){
this.setState({
display,top:top,bottom,left,right
})
}else{
this.setState({
display,top,right
})
}
}else{
this.setState({
display:'none'
})
}
console.log('Slected')
}
onMounseUp(e){
e.preventDefault()
let sel = window.getSelection && window.getSelection();
if(!sel.isCollapsed){
console.log('Moved Up')
}
}
onMouseDwn(e){
let sel = window.getSelection && window.getSelection();
if(!sel.isCollapsed){
console.log('Moved Down')
}
}
getSelectionHtml() {
let html = "";
if (typeof window.getSelection != "undefined") {
let sel = window.getSelection();
if (sel.rangeCount) {
let container = document.createElement("div");
for (let i = 0,len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
console.log('html',html)
return html;
}
lastCharRTL(txt) {
return /[u0591-u07FFuFB1D-uFDFDuFE70-uFEFC]$/.test(txt);
}
triggerAlltime(e){
// console.log('Some Thinms')
if(!window.getSelection().isCollapsed){
//find the Direction Of Slelection
let sel = window.getSelection();
console.log(sel)
let range = document.createRange();
range.setStart(sel.anchorNode,sel.anchorOffset);
range.setEnd(sel.focusNode,sel.focusOffset);
let backwards = range.collapsed;
range.detach();
// get selection rects
let rects = sel.getRangeAt(0).getClientRects();
let n = rects.length - 1;
let display = 'block';
console.log(this.lastCharRTL(this.getSelectionHtml()))
if (this.lastCharRTL(this.getSelectionHtml()))
this.setState({
display:'none',diplayForDown:'none',top: rects[n].top + 10,left: rects[n].left - 10
})
else if (backwards)
this.setState({
display,top: rects[0].top + -68,left: rects[0].left
})
else
this.setState({
display:'none',diplayForDown:'block',top: rects[n].top + 40,left: rects[n].right+-160
})
}else{
this.setState({
display:'none',})
}
}
render(){
return(
最佳答案
问题是#pointer设置为绝对位置,但是当内容长且可滚动时,顶部距离是从窗口顶部而不是内容顶部计算的.
添加高度：100vh可以解决此问题,但在某些情况下您可能会看到两个滚动条.
另一种方法是在计算指针div的顶部时添加window.pageYOffset.
if (backwards) {
$('#pointer').css({top: rects[0].top + window.pageYOffset + 10,left: rects[0].left - 10}).show();
} else {
$('#pointer').css({top: rects[n].top + window.pageYOffset + 10,left: rects[n].right}).show();
}
这是DEMO
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
