@model List<string>
@*<div class="row">*@
<div id="viewResults">
    <div class="col-md-12">
        

        <ul>
            @foreach (string logRecord in Model)//ViewBag.Logs)
            {
                if (!string.IsNullOrEmpty(logRecord))
                {
					<li style="color:blue;">
						@logRecord
					</li>
                }
            }
        </ul>
    </div>
</div>

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 4.5em;
  overflow-y: scroll
}

<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
   <li>item6</li>
   <li>item7</li>
   <li>item8</li>
   <li>item9</li>
</ul>

@model List<string>
@*<div class="row">*@
<div id="viewResults">
<div class="col-md-12" style="height:200px;overflow-y:scroll">
        <ul>
            @foreach (string logRecord in Model)//ViewBag.Logs)
            {
                if (!string.IsNullOrEmpty(logRecord))
                {
					<li style="color:blue;">
						@logRecord
					</li>
                }
            }
        </ul>
        <a name="LogBottomAnchor" id="LogBottomAnchor"></a>
    </div>
</div>

<script type="text/javascript">
    function ScrollView() {
        $('html, body').animate({
            scrollTop: $("#LogBottomAnchor").offset().top
        }, 1000);
    }
    window.onload = ScrollView;
</script>

   function RefreshLog()
    {
        var url = '@Url.Action("RefreshLogs", "Home")';
        $('#viewResults').load(url);
        ScrollView2();
    };
	function ScrollView2() {

        items = document.querySelectorAll(".listclass");
        last = items[items.length - 1];
        last.scrollIntoView();
    }

   function RefreshLog()
    {
        var url = '@Url.Action("RefreshLogs", "Home")';
        $('#viewResults').load(url);
        ScrollView2();
    };

   function RefreshLog()
    {
        var url = '@Url.Action("RefreshLogs", "Home")';
        $('#viewResults').load(url, ScrollView2());
    };