未捕获的TypeError:无法读取未定义的属性“”scrollTop“”

Question

我在一个网页上工作，在那里我需要显示一个更改选择下拉列表的值的引导模式。

这是select dropdown的change事件的代码。

$('#joinb').change(function(){
    switch ($('#joinb')[0].selectedIndex) {
        case 3:
            header_modal = 'Joining Scyon Stria cladding on stud with vertical flashing';
            img_src = "/_mockups/boot_calcs/img/onflash.jpg";
            text_modal = 'This will calculate Stria vertical flashing for all walls greater than 4.2m in length. You can add additional Stria vertical flashing in step 5';
            break;
        case 2:
            header_modal = 'Joining Scyon Stria cladding on stud with sealant';
            img_src = "/_mockups/boot_calcs/img/onsealant.jpg";
            text_modal = 'Boards will be joined on stud with sealant only. No Stria vertical flashing stop will be calculated for this option. This must be calculated in step 5 or select joining board option: On stud vertical flashing option in step 1';
            break;
        case 1:
            header_modal = 'Joining Scyon Stria cladding off stud';
            img_src = "/_mockups/boot_calcs/img/off-stud.jpg";
            text_modal = '';
            break;
    }           
    $('#myModalLabel').html(header_modal);
    $('#modalImg').attr('src',img_src);
    $('#modalText').html(text_modal);
    $('#myModal').modal() //The error occurs at this line.
}); 

我已经包含了js/bootstrap.min.js，并且在供应商/js/bootstrap.min.js中还有另一个文件。

现在，当我在HTML页面上更改select选项的值时，会弹出一些不可见的弹出窗口，阻塞整个屏幕。最终，除了重新加载页面之外，我别无选择。

当我更改select中的值时，在web浏览器控制台上遇到Uncaught TypeError: Cannot read property 'scrollTop' of undefined错误。

我已经工作了两天来解决这个问题，但我无法找到'scrollTop‘属性在哪里，是什么导致了这个问题？

请帮帮我。我尝试了很多可能性，但都不能解决这个问题。

Answer 1

这个应该能让你达到目的。没有你的html，我不能重现你的"Scroll Top“问题。

​

$(document).ready(function() {

  $('#select_dropdown').change(function() {

    var dropVal = $('#select_dropdown').val();
    var header_modal = '';
    var img_src = '';

    if (dropVal == 1) {
      header_modal = 'Joining Scyon Stria cladding off stud';
      img_src = "/_mockups/boot_calcs/img/off-stud.jpg";
      text_modal = '';
    } else if (dropVal == 2) {
      header_modal = 'Joining Scyon Stria cladding on stud with sealant';
      img_src = "/_mockups/boot_calcs/img/onsealant.jpg";
      text_modal = 'Boards will be joined on stud with sealant only. No Stria vertical flashing stop will be calculated for this option. This must be calculated in step 5 or select joining board option: On stud vertical flashing option in step 1';
    } else if (dropVal == 3) {
      header_modal = 'Joining Scyon Stria cladding on stud with vertical flashing';
      img_src = "/_mockups/boot_calcs/img/onflash.jpg";
      text_modal = 'This will calculate Stria vertical flashing for all walls greater than 4.2m in length. You can add additional Stria vertical flashing in step 5';
    }

    $('#myModalLabel').html(header_modal);
    $('#modalImg').attr('src', img_src);
    $('#modalText').html(text_modal);
    $('#myModal').modal() //The error occurs at this line.  

    return;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div id="test">TEST</div>


<select id="select_dropdown" class="form-control">
  <option>--Select an option--</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<br>

<!-- Button trigger modal -->
<!--
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
-->


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body" id="modalText">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

​