스크롤 막대의 이미지 선택 지연/선택 취소

질문:

질문:
Ang cordova 플러그인을 사용하여 Angularjs에서 IOS 프로그램을 만듭니다. 프로젝트에 대해 수평 스크롤 (예를 들어 슬라이딩) 을 사용합니다. 그림을 선택하거나 취소하려고 시도할 때마다 응답이 지연됩니다.$watch () 를 사용하여 $scope 대상의 변경 사항을 감시합니다.css에서든 컨트롤러에서든 나는 문제가 발생하는 위치를 확정할 수 없다.누구든지 저를 도와 이 문제를 해결할 수 있습니다.
태그:
<div class="wrapper no-copy">
<div class="internal" ng-repeat="pf in printlist"><img class="" ng-click="pf.selectFile = !pf.selectFile ;showCustom($event,pf)" ng-src="{{pf.imagePath}}"><div class="no-copy filedetail"><div style="color:black;margin-left:7px;" class=" no-copy internal font-filedetail">{{pf.filename.substring(0,8)}}..</br>Pages: {{pf.totalPages}}</br>{{pf.releaseCode}}</div><div class="internal filedetailbar"><img style="height:70px;" src="images/beacon/line_icon.png"></div></div>
</div>
</div>
CSS:
.wrapper {
  width: 100%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  background-color: white;
  // Toggle this depending upon whether you want to see the scrollbar
  &::-webkit-scrollbar {
    display: none;
  }
}

.internal {
  display: inline;
}
컨트롤러:
$scope.showCustom = function (event, detail) {
            console.log('detail')
            console.log(detail)
            /*$mdDialog.show({
             locals: {name: detail},
             clickOutsideToClose: true,
             scope: $scope,
             preserveScope: true,
             templateUrl: 'ibprintProcessList/filedetail.html',
             controller: function DialogController($scope, $mdDialog, name) {*/

            $scope.del = detail;
            console.log($scope.del.color)
            console.log('*************')
            console.log($scope.del)
            if (!$scope.del.color) {
                $scope.color = false
            }
            if ($scope.del.selectFile) {
                $scope.filestatus = 'selected '
                $scope.disabled = false
                $scope.isFileSelect = $scope.isFileSelect + 1
                $scope.selectfileextension = $scope.del.filename.split('.')
                console.log('???????????????')
                console.log($scope.selectfileextension[1])
                if (($scope.selectfileextension[1] == 'pdf') || ($scope.selectfileextension[1] == 'rtf')) {
                    $scope.del.imagePath = "./images/beacon/pdf_icon_select.png"
                }
                else if (($scope.selectfileextension[1] == 'doc') || ($scope.selectfileextension[1] == 'docx')) {
                    $scope.del.imagePath = "./images/beacon/word_icon_select.png"
                }
                else if (($scope.selectfileextension[1] == 'xls') || ($scope.selectfileextension[1] == 'xlsx')) {
                    $scope.del.imagePath = "./images/beacon/xls_icon_select.png"
                }
                else if (($scope.selectfileextension[1] == 'ppt') || ($scope.selectfileextension[1] == 'pptx')) {
                    $scope.del.imagePath = "./images/beacon/pp_icon_select.png"
                }
                else if (($scope.selectfileextension[1] == 'png') || ($scope.selectfileextension[1] == 'jpg') || ($scope.selectfileextension[1] == 'jpeg') || ($scope.selectfileextension[1] == 'bmp') || ($scope.selectfileextension[1] == 'gif') || ($scope.selectfileextension[1] == 'tiff') || ($scope.selectfileextension[1] == 'tif')) {
                    $scope.del.imagePath = "./images/beacon/image_icon_select.png"
                }
            }
            else {
                $scope.disabled = true
                $scope.isFileSelect = $scope.isFileSelect - 1
                $scope.filestatus = 'unselected '
                $scope.selectfileextension = $scope.del.filename.split('.')
                if (($scope.selectfileextension[1] == 'pdf') || ($scope.selectfileextension[1] == 'rtf')) {
                    $scope.del.imagePath = "./images/beacon/pdf_icon.png"
                }
                else if (($scope.selectfileextension[1] == 'doc') || ($scope.selectfileextension[1] == 'docx')) {
                    $scope.del.imagePathh = "./images/beacon/word_icon.png"
                }
                else if (($scope.selectfileextension[1] == 'xls') || ($scope.selectfileextension[1] == 'xlsx')) {
                    $scope.del.imagePath = "./images/beacon/xls_icon.png"
                }
                else if (($scope.selectfileextension[1] == 'ppt') || ($scope.selectfileextension[1] == 'pptx')) {
                    $scope.del.imagePath = "./images/beacon/pp_icon.png"
                }
                else if(($scope.selectfileextension[1] == 'png') || ($scope.selectfileextension[1] == 'jpg') || ($scope.selectfileextension[1] == 'jpeg') || ($scope.selectfileextension[1] == 'bmp') || ($scope.selectfileextension[1] == 'gif') || ($scope.selectfileextension[1] == 'tiff') || ($scope.selectfileextension[1] == 'tif')){
                    $scope.del.imagePath = "./images/beacon/image_icon.png"
                }
            }

            /*$scope.closeDialog = function () {
             $mdDialog.hide();
             //$scope.printNow()
             }*/
            $scope.del.$digest()
            $scope.printlist.$digest()
            console.log('Watch function starts')
       // $scope.$watch($scope.del, $scope.showCustom);
        $scope.$watchGroup(['$scope.del', '$scope.printlist'],$scope.showCustom,true)
        console.log('Watch function ends')
        }
사용자가 $scope을 선택하거나 취소할 때showCustom(이벤트, pf)이 트리거되었습니다.
pf 대상은 컨트롤러에 전달되고, pf 대상은 $scope에 분배됩니다.del 객체
사용자가 $scope을 선택하거나 취소할 때델?이미지 path 이미지 저장 및 원본 변경
참조 사진: Screen Shot
$watch () 와 $watch Group () 함수를 시도했습니다. 선택/선택 취소

답안

를 선택할 때 지연됩니다. 간단한 수평 스크롤 막대를 사용하고, 넘침 스타일을 사용하면 모바일 프로그램에서 미끄러질 수 있습니다.
-webkit-overflow-scrolling: touch;
 &::-webkit-scrollbar {
    display: none;
  }
웹에서 모바일 애플리케이션으로 마이그레이션하고 있으므로 위의 CSS가 삭제되었습니다 -웹키 넘침 스크롤은 브라우저에 적용됩니다.때때로 웹 응용 프로그램을 모바일 응용 프로그램으로 변환할 때, 웹 응용 프로그램이 작동하지 않을 수도 있습니다.
대신 다음 CSS를 추가합니다.
overflow-y: hidden;
overflow-x: scroll;
width: 500px;         // you can change the width size depends on you
white-space: nowrap;