How to know if Modal has active scrolling?

Question

I have a modal that scrolls when the content of the window is larger on the screen..., I would like to put a different class when the modal scrolling was active, in the example below it changes the class even without scrolling:

My modal controller:

app.controller("ModalController", ["$scope", "$uibModal",
    function($scope, $uibModal) {

        $scope.verifyScroll = function() {
            var doc = $(document).height(); //gostaria de saber aqui qual elemento eu devo capturar baseado no html abaixo?
            var win = $(window).height();
            $scope.scroll_option = (doc > win) ? 'scrolling' : '';
        };

    }]);

HTML rendered from modal:

<div uib-modal-window="modal-window" class="modal fade ng-scope ng-isolate-scope in" role="dialog" size="detalhes not-observation" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;"><div class="modal-dialog modal-detalhes not-observation"><div class="modal-content" uib-modal-transclude="">
    <div class="bg-close-modal ng-scope" ng-click="cancel();hideTooltip()"></div>
    <div class="modal-detalhes-block ng-scope active" ng-class="{active:(content.dados.show_assign_task == true || nextPageTarefa == true || (role_user == 'STUDENT' &amp;&amp; content.dados.indicacao ) )}" style="">
        <div class="space elastic-close">
            <button type="button" class="close close-modal" ng-click="cancel();hideTooltip()" title="Fechar" aria-label="Fechar">
                <i class="fa fa-times" aria-hidden="true"></i>
            </button>
        </div>
        <!-- modal: (coluna direita ou única) -->
        <!-- ngIf: role_user == 'STUDENT' && content.dados.indicacao && !content.dados.show_assign_task -->

        <!--INICIO - INDICACAO  (coluna esquerda - aba aberta) - passo 1 -->
        <!-- ngIf: (role_user != 'STUDENT' && content.dados.indicacao) || (content.dados.show_assign_task && !nextPageTarefa) --><div ng-style="{'min-height':heightModal}" ng-if="(role_user != 'STUDENT' &amp;&amp; content.dados.indicacao) || (content.dados.show_assign_task &amp;&amp; !nextPageTarefa)" ng-hide="nextPageTarefa" class="col-xs-12 col-sm-8 col-md-8 col-lg-8 bg-grey-light content-left ng-scope" style="min-height: 621px;">
            <div class="modal-header">
                <span class="title-header-modal"><i class="task-icon-title"></i><!-- ngIf: !content.dados.indicacao --><h1 ng-if="!content.dados.indicacao" class="title-header ng-binding ng-scope" style=";margin-left:-15px;" ng-bind-html="content.form_task.task_title">Atribuir tarefa</h1><!-- end ngIf: !content.dados.indicacao --></span>
                <!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
                <!-- ngIf: role_user != 'STUDENT' --><span ng-if="role_user != 'STUDENT'" ng-bind-html="messagesIndication" class="ng-binding ng-scope"></span><!-- end ngIf: role_user != 'STUDENT' -->
                <!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
                <div class="row-one">
                    <label for="nomeIndicacao" ng-bind-html="content.form_task.label.title_task" class="ng-binding">Título da tarefa:</label>
                    <!-- ngIf: !content.dados.indicacao --><input ng-if="!content.dados.indicacao" ng-model="nome_indicacao" name="nomeIndicacao" id="nomeIndicacao" type="text" class="form-control ng-pristine ng-untouched ng-valid ng-scope ng-empty"><!-- end ngIf: !content.dados.indicacao -->
                    <!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
                </div>
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <label for="date_start" ng-bind-html="content.form_task.label.date_start" class="ng-binding">Início:</label>
                        <!-- ngIf: !content.dados.indicacao --><input ng-if="!content.dados.indicacao" name="date_start" type="date" id="date_start" value="2018-08-10" class="form-control form-date date-indication ng-scope"><!-- end ngIf: !content.dados.indicacao -->
                        <!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <label for="date_end" ng-bind-html="content.form_task.label.date_end" class="ng-binding">Término:</label>
                        <!-- ngIf: !content.dados.indicacao --><input ng-if="!content.dados.indicacao" value="" ng-model="date_end" ng-blur="onChangeDateEnd(date_end)" name="date_end" type="date" id="date_end" class="form-control form-date date-indication ng-pristine ng-untouched ng-valid ng-scope ng-empty"><!-- end ngIf: !content.dados.indicacao -->
                        <!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <label class="form-check-label">
                            <!-- ngIf: !content.dados.indicacao --><input ng-if="!content.dados.indicacao" name="status" type="checkbox" id="statusIndicacao" ng-true-value="'1'" ng-false-value="'0'" class="form-check-input ng-scope" ng-checked="true" checked="checked"><!-- end ngIf: !content.dados.indicacao -->
                            <!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
                            <span class="txt-check ng-binding" ng-bind-html="content.form_task.label.task_status">Ativar tarefa</span>
                            <span class="xs-hidden">
                                <i class="fa fa-question-circle grey-info" uib-tooltip="A tarefa ficará visível para o aluno somente se esta opção estiver ativa" tooltip-trigger="none">
                                </i>
                            </span>
                        </label>
                    </div>

                </div>

                <!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
<!--                <hr class="line-title">-->
            </div>

            <div class="modal-body">
                <span ng-show="content.dados.is_loading" class="loadingDataBox ng-hide"><br><br><img onerror="this.src='/webapp/sistema/img/v2-webapp/no_image.png'" src="/webapp/sistema/img/mini-loading-green.svg" class="text-center" border="0"><br><br><br><br><br><br><br><br><br><br><br><br><br></span>

                <!-- ngIf: content.dados.atividades.length > 0 --><div ng-show="!content.dados.is_loading" class="no-padding resume ng-scope" ng-if="content.dados.atividades.length > 0">
                    <div class="clearfix margin-top-20">
                        <label ng-bind-html="content.form_task.label.select_activities" class="ng-binding">Selecione as atividades a serem atribuídas:</label>
                            <span class="xs-hidden" title="">
                                <i class="fa fa-question-circle grey-info" uib-tooltip="Clicando em uma ou mais opções abaixo, você habilita a edição da descrição para cada uma das atividades de sua tarefa." tooltip-trigger="none">
                                </i>
                            </span>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
                        <div ng-click="types.pre1=!types.pre1;displayTarefa(types.pre1, 'pre1')" class="bg-grey-box atividade-item the-indication atv-0 active" ng-class="{active:types.pre1}" style="">
                            <i class="association-icon"></i>

                            <span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.pre_leitura_1">Pré<br>Leitura 1</span>

                        </div>
                    </div>

                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
                        <div ng-click="types.pre2=!types.pre2;displayTarefa(types.pre2, 'pre2')" class="bg-grey-box atividade-item the-indication atv-1 active" ng-class="{active:types.pre2}" style="">
                            <i class="quiz-icon"></i>

                            <span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.pre_leitura_2">Pré<br>Leitura 2</span>

                        </div>
                    </div>

                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
                        <div ng-click="types.leitura=!types.leitura;displayTarefa(types.leitura, 'leitura')" class="bg-grey-box atividade-item the-indication atv-4 active" ng-class="{active:types.leitura}" style="">
                            <i class="caderno-leitura-icon"></i>

                            <span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.leitura">Leitura</span>

                        </div>
                    </div>

                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
                        <div ng-click="types.pos1=!types.pos1;displayTarefa(types.pos1, 'pos1')" class="bg-grey-box atividade-item the-indication atv-2" ng-class="{active:types.pos1}">
                            <i class="quiz-icon"></i>

                            <span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.pos_leitura_1">Pós<br>Leitura 1</span>

                        </div>
                    </div>

                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
                        <div ng-click="types.pos2=!types.pos2;displayTarefa(types.pos2, 'pos2')" class="bg-grey-box atividade-item the-indication atv-3" ng-class="{active:types.pos2}">
                            <i class="autoria-icon"></i>

                            <span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.pos_leitura_2">Pós<br>Leitura 2</span>

                        </div>
                    </div>

                    <div class="clearfix">
                        <p></p>
                    </div>

                </div><!-- end ngIf: content.dados.atividades.length > 0 -->

                <!--TEXTO-->
                <div ng-show="types.pre1" class="col-xs-12 col-sm-12 col-md-12 no-padding resume" style="">
                    <label ng-bind-html="content.form_task.label.pre_leitura_1" class="ng-binding">Pré Leitura 1:</label>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
                        <textarea ng-focus="placeholderIndication.pre1 = ''" ng-blur="placeholderIndication.pre1 = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.pre1" name="pre-leitura-1" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f7f7f7;height: 64px;width: 99%; overflow: auto;"></textarea>
                    </div>
                </div>
                <!--TEXTO-->

                <!--TEXTO-->
                <div ng-show="types.pre2" class="col-xs-12 col-sm-12 col-md-12 no-padding resume" style="">
                    <label ng-bind-html="content.form_task.label.pre_leitura_2" class="ng-binding">Pré Leitura 2:</label>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
                        <textarea ng-focus="placeholderIndication.pre2 = ''" ng-blur="placeholderIndication.pre2 = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.pre2" name="pre-leitura-2" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f7f7f7;height: 64px;width: 99%; overflow: auto;"></textarea>
                    </div>
                </div>
                <!--TEXTO-->
             <!--TEXTO-->
                <div ng-show="types.leitura" class="col-xs-12 col-sm-12 col-md-12 no-padding resume" style="">
                    <label ng-bind-html="content.form_task.label.leitura" class="ng-binding">Leitura:</label>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
                        <textarea ng-focus="placeholderIndication.leitura = ''" ng-blur="placeholderIndication.leitura = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.leitura" name="texto" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f7f7f7;height: 64px;width: 99%; overflow: auto;"></textarea>
                    </div>
                </div>
                <!--TEXTO-->


                <!--TEXTO-->
                <div ng-show="types.pos1" class="col-xs-12 col-sm-12 col-md-12 no-padding resume ng-hide">
                    <label ng-bind-html="content.form_task.label.pos_leitura_1" class="ng-binding">Pós leitura 1:</label>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
                        <textarea ng-focus="placeholderIndication.pos1 = ''" ng-blur="placeholderIndication.pos1 = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.pos1" name="pos-leitura-1" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f7f7f7;height: 64px;width: 99%; overflow: auto;"></textarea>
                    </div>
                </div>
                <!--TEXTO-->


                <!--TEXTO-->
                <div ng-show="types.pos2" class="col-xs-12 col-sm-12 col-md-12 no-padding resume ng-hide">
                    <label ng-bind-html="content.form_task.label.pos_leitura_2" class="ng-binding">Pós leitura 2:</label>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
                        <textarea ng-focus="placeholderIndication.pos2 = ''" ng-blur="placeholderIndication.pos2 = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.pos2" name="pos-leitura-2" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f9f6f6;height: 64px;width: 97%; overflow: auto;"></textarea>
                    </div>
                </div>
                <!--TEXTO-->

                <br>


            </div>





            <div class="clearfix block-bottom"></div>

        </div><!-- end ngIf: (role_user != 'STUDENT' && content.dados.indicacao) || (content.dados.show_assign_task && !nextPageTarefa) -->


        <!--FIM - INDICACAO-->


        <!--INICIO - INDICACAO --passo 2 (coluna esquerda - aba aberta) -->
        <!-- ngIf: nextPageTarefa -->


        <!--FIM - INDICACAO passo 2  (coluna direita ou conteúdo principal) -->



        <div class="col-xs-12 col-md-12 content-right content-indication col-sm-4 col-md-4 col-lg-4" ng-style="{'min-height':content.height_modal_op}" ng-class="{'col-xs-12 col-sm-4 col-md-4 col-lg-4 content-right content-indication':(content.dados.indicacao == true || content.dados.show_assign_task == true || nextPageTarefa == true), 'col-md-12 content-right content-indication':(!content.dados.indicacao)}" style="min-height: 586px;">

            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div ng-class="{indication:types.leitura}" class="box-text-description indication" style="">
                    <!-- ngIf: content.dados.imagem_modal !== '' && content.dados.imagem_modal !== null --><span ng-if="content.dados.imagem_modal !== '' &amp;&amp; content.dados.imagem_modal !== null" class="box-img-description ng-scope" ng-class="{'sem-selo':(role_user=='STUDENT' || (!content.dados.is_trade_edition &amp;&amp; (content.dados.recomendado_para == null || content.dados.is_trade_edition)))}">
                        <!-- ngIf: role_user != 'STUDENT' --><div class="selo-box ng-scope" ng-if="role_user != 'STUDENT'">
                            <!-- ngIf: content.dados.recomendado_para != null && !content.dados.is_trade_edition && role_user!='STUDENT' --><span ng-if="content.dados.recomendado_para != null &amp;&amp; !content.dados.is_trade_edition &amp;&amp; role_user!='STUDENT'" class="recomendation ng-binding ng-scope">
                            <span ng-bind-html="content.dados.recomendado_para.title" class="ng-binding">Sugerido para:</span>
                            4º ano
                        </span><!-- end ngIf: content.dados.recomendado_para != null && !content.dados.is_trade_edition && role_user!='STUDENT' -->
                        <!-- ngIf: content.dados.is_trade_edition -->
                        </div><!-- end ngIf: role_user != 'STUDENT' -->
                        <!-- ngIf: types.leitura --><i ng-if="types.leitura" class="teacher-cap ng-scope" style=""></i><!-- end ngIf: types.leitura --><img onerror="this.src='/webapp/sistema/img/v2-webapp/no_image.png'" ng-src="https://gutennews.com.br/admin/uploader/uploads/232_image_5634995750.jpg" ng-click="openArticleIndication(content.dados)" class="img-responsive cursor-pointer" src="https://gutennews.com.br/admin/uploader/uploads/232_image_5634995750.jpg"></span><!-- end ngIf: content.dados.imagem_modal !== '' && content.dados.imagem_modal !== null -->
                </div>
                <h1 ng-click="openArticleIndication(content.dados)" class="title-detalhes cursor-pointer ng-binding" ng-bind-html="content.dados.title">BICHARADA</h1>
                <h3 class="subtitle-detalhes ng-binding" ng-bind-html="content.dados.subtitle">Crônica da Nathalie</h3>
                <br>
                <h4 class="title-edition ng-binding"><span ng-bind-html="content.title_edition + ' ' + content.dados.numero_edicao" class="ng-binding">Edição 139</span> | Publicado em 03/04/2018</h4>
                <span ng-show="content.dados.is_loading" class="loadingDataBox ng-hide"><br><br><img onerror="this.src='/webapp/sistema/img/v2-webapp/no_image.png'" src="/webapp/sistema/img/mini-loading-green.svg" class="text-center" border="0"><br><br><br><br><br><br><br><br><br><br><br><br><br></span>
                <div class="clearfix" ng-hide="content.dados.is_loading">
                    <!-- ngIf: role_user == 'STUDENT' || role_user == 'PARENT' || (content.dados.plano_aula_id == null || (content.dados.ops_plan_status == null && content.dados.plano_aula_id == null)) -->
                    <!-- ngIf: role_user != 'STUDENT' && role_user != 'PARENT' && (content.dados.plano_aula_id != null || content.dados.ops_plan_status == 1 || content.dados.ops_plan_status == 2) --><div class="text-center ng-scope" ng-if="role_user != 'STUDENT' &amp;&amp; role_user != 'PARENT' &amp;&amp; (content.dados.plano_aula_id != null || content.dados.ops_plan_status == 1 || content.dados.ops_plan_status == 2)">
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 no-margin no-padding mobile-col-x-12">
                        <button class="btn btn-default btn-blue-plano-aula" ng-click="loadPlanoAulaSugestoes(300,content.dados)">Plano<br>de aula</button>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 no-margin no-padding mobile-col-x-12">
                            <button class="btn btn-default btn-green-teacher" ng-click="accessActivities()">Acessar<br>agora</button>
                        </div>
                    </div><!-- end ngIf: role_user != 'STUDENT' && role_user != 'PARENT' && (content.dados.plano_aula_id != null || content.dados.ops_plan_status == 1 || content.dados.ops_plan_status == 2) -->
                    <p></p>
                    <div class="clearfix" ng-hide="content.dados.is_loading">
                        <span ng-show="content.message != ''" ng-bind-html="content.message" class="ng-binding"></span>


                        <!-- INDICATIONS -->
                        <span class="btn-options">
                            <!-- ngIf: role_user != 'STUDENT' && !content.dados.indicacao --><div ng-if="role_user != 'STUDENT' &amp;&amp; !content.dados.indicacao" class="text-center ng-scope">
                                <button class="btn btn-default btn-actions ng-binding" ng-click="assignTasks()"><i class="tasks-icon active" ng-class="{'active':content.dados.show_assign_task,'not-active':!content.dados.show_assign_task}" style=""></i> Fechar a tarefa</button>
                            </div><!-- end ngIf: role_user != 'STUDENT' && !content.dados.indicacao -->
                            <!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->

                             <!-- ngIf: role_user != 'STUDENT' --><div ng-if="role_user != 'STUDENT'" class="text-center ng-scope">
                                <button class="btn btn-default btn-actions ng-binding" ng-click="configContent();"><i class="hide-content"></i>Conteúdo escondido</button>
                            </div><!-- end ngIf: role_user != 'STUDENT' -->
                            <div class="text-center">
                                <button class="btn btn-default btn-actions ng-binding" ng-click="setFavorite(content.is_favorited)"><i class="fav-icon not-active" ng-class="{'not-active': (content.is_favorited == false),'active':  (content.is_favorited == true)}" aria-hidden="true"></i>Adicionar aos meus interesses</button>
                            </div>
                        </span>
                    </div>
                    <!-- ngIf: role_user == 'STUDENT' -->
            </div>
            <div class="clearfix"></div>
        </div>


        <div class="modal-footer">
        </div>
    </div>

</div></div></div>
</div>

Answer 1

You should inspect the element with the "modal-body class".

To know if you have scroll, check if scroll property is larger than the client, for width or height, like this:

var scrollHorizontal = $('.modal-body').scrollWidth > $('.modal-body').clientWidth;
var scrollVertical = $('.modal-body').scrollHeight > $('.modal-body').clientHeight;

Answer 2

I solved it this way, but thanks for the help:

$scope.verifyScroll = function() {
                $timeout(function() {
                var doc = ($('.modal-detalhes-block').height());
                var win = $(window).height() - 58;
                $scope.scroll_option = (doc > win) ? 'scrolling' : '';
                //console.log(doc+'>'+win);
               }, 0);
            };

Answer 3

Using element.offsetHeight, element.offsetWidth , element.scrollHeight and element.scrollWidth, you can determine if your element has content larger than its size.

Example:

if (document.getElementById('hello')) {
}

var element = document.querySelector('#element');
if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
   // Se o "scrolling" estiver ativo o background será amarelo
  element.className = "mmm"; //muda a classe do elemento
}
else{
  //O "scrolling" não está ativo
}

div{
  width:150px; 
  height:40px; 
  overflow:auto;
}
.mmm{
   background-color: yellow;
}

<div id="element"><p id="hello">Esse é um texto qualquer</p></div>

If the content is larger than the size of the element it will change to the class "mmm" with the yellow background color