javascript滾動后未正確定位所選文本

Question

我想讓我的用戶通過選擇文本進行搜索。 選擇文本后，將在所選文本的右側打開一個新按鈕，以提供是否進行搜索的選項。 當用戶滾動到頁面底部時，搜索按鈕沒有正確定位。 我的代碼如下：

HTML：

 <body ng-app="newsApp"  ng-controller="NewsCtrl" ng-mouseup="showSelectedText($event)">  

     <!-- user search button -->
     <div ng-show="isUserSearch" ng-style="{ 'left' : leftPos, 'top': rightPos, 'display': displayState }" class="searchBtn">
        Search             
     </div>

     <!-- main content -->
     <div>
       <!-- main content -->
    </div>

 </body>

CSS ::

.searchBtn {
    position: absolute;
    padding: 4px 7px;
    background-color: #ff0;
    color: #ddd;
    z-index: 9999;
    border-radius: 5px 5px 5px 5px;
    height: 27px;
    cursor: pointer;
 }

JavaScript的::

angular.module('newsApp',  [])

   .controller('NewsCtrl',function ($scope) {

       $scope.leftPos = "-200px";
       $scope.rightPos = "-200px";
       $scope.displayState = "none !important";
       $scope.isUserSearch = false;

       $scope.selectedTextSearch = "";

       $scope.showSelectedText = function($event) {
          $scope.selectedText =  "";

          if (window.getSelection) {
             $scope.selectedText = window.getSelection().toString();
          } 
         else if (document.selection && document.selection.type != "Control") {
             $scope.selectedText = document.selection.createRange().text;
          }

          if($scope.selectedText.length > 0)    {            
             $scope.leftPos = (+$event.clientX + 5) + 'px';   
             $scope.rightPos = ( +$event.clientY - 15 ) + 'px';  
             $scope.isUserSearch = true;
          } else {
             $scope.isUserSearch = false;
          }
       };

   });

Plunker

我現在能做什么？

Answer 1

更改clientX到pageX

$scope.leftPos = (+$event.pageX + 5) + 'px';   
$scope.rightPos = ( +$event.pageY - 15 ) + 'px';

看到這個答案的區別。

javascript滾動后未正確定位所選文本

問題描述

1 個解決方案

解決方案1
1 已采納 2015-06-21 19:13:52

javascript滾動后未正確定位所選文本

問題描述

1 個解決方案

解決方案1 1 已采納 2015-06-21 19:13:52

解決方案1
1 已采納 2015-06-21 19:13:52