Shift right when selection text

[thuynt46]

I met this issue using EpubJS 0.3.93. It happens to me when I'm selecting some text. The page auto-shift right looks like the screen. Anyone have solution to fix this?

[thuynt46]

@johnfactotum do you have some solutions for this?

[nduc86686]

Has anyone fixed this problem yet?

[otizis]

遇到了，苦苦研究三天，找到一个方法，添加下面的代码可以做到：当选择内容跨页时，取消框选 在contents.js 的 addSelectionListeners 方法里添加事件监听

    this._onSelectionChange = this.onSelectionChange.bind(this);
    this.document.addEventListener("selectionchange", this._onSelectionChange, {
      passive: true
    });
    // 添加下面的方法
    this.document.addEventListener("selectstart", (event)=>{
      const targetNode = document.querySelector(".epub-container");
      const sourceLeft = targetNode.scrollLeft
      targetNode.style.overflow = "auto";
      // 选文字后，开始滚动，说明跨区了进行打断
      targetNode.addEventListener("scroll",(event2)=>{
          // console.log("scroll",event2.target.scrollLeft)
          targetNode.style.overflow = "hidden";
          var selection = this.window.getSelection();
          //var r = selection.getRangeAt(0);
          selection.removeAllRanges();
          targetNode.scrollLeft = sourceLeft
      },{ capture: false, once:true })
    // 添加结束
    }, { passive: true });

再在onSelectionChange 方法添加

onSelectionChange(e) {
    if (this.selectionEndTimeout) {
      clearTimeout(this.selectionEndTimeout);
    }
    //
    this.selectionEndTimeout = setTimeout(function () {
      var selection = this.window.getSelection();
      this.triggerSelectedEvent(selection);
      // 添加下面这行
      const targetNode = document.querySelector(".epub-container");
      targetNode.style.overflow = "hidden";
    // 添加结束
    }.bind(this), 2000);
  }

思路是这样的，当开始选择文字的时候，将 .epub-container 的 overflow的hidden改为 auto 这样当滚动的时候，可以监听到 scroll 事件，当scroll事件触发，就取消选择并恢复 overflow为hidden，scrollLeft为初始值。 下面这段代码是 当选择文字没有触发scroll时，默认将overflow改回hidden

这里使用 document.querySelector(".epub-container"); 拿容器，因为我是基于源码改的，所以不知道从内部有没有更好的办法 拿到 container的document