I would consider this a lazy mans approach to scrolling a grid, it is quick and easy to implement but there are some limitations. It will work for smaller amounts of data where column sorting and paging is not required. Although column sorting can be implemented with a little extra work.

For demo purposes the data I am using is generated by populating a list of Comment objects in the page load event.
Here is the Comment class.

public class Comment 
{
    public DateTime CreatedDate{ get; set; }
    public string UserID{ get; set; }
    public string CommentText{ get; set; }
}

And the data population. Notice how the data is bound to the grid in the usual manner.

protected void Page_Load(object sender, EventArgs e)
{
    var comments = new List<Comment>(){
        new Comment{CreatedDate=DateTime.Now, UserID="John.Jones", CommentText="This request has been approved"},
        new Comment{CreatedDate=DateTime.Now.AddDays(-1), UserID="John.Jones", CommentText="The value is incorrect"},
        new Comment{CreatedDate=DateTime.Now.AddDays(-2), UserID="Phil.Peters", CommentText="Please confirm the quantity required"},
        new Comment{CreatedDate=DateTime.Now.AddDays(-3), UserID="Merry.Berry", CommentText="The request has been amended"},
        new Comment{CreatedDate=DateTime.Now.AddDays(-4), UserID="Peter.Piper", CommentText="Rejected at level 1"},
        new Comment{CreatedDate=DateTime.Now.AddDays(-5), UserID="Fred.Flinstone", CommentText="Initial Submission"}
    };
    CommentsGrid.DataSource=comments;
    CommentsGrid.DataBind();
}

This is how the grid will display on the WebForm.

The column headers are cells in a single row table. The header cells and datagrid columns are fixed to the same width to guarantee their alignment.
The following diagram shows how the gridview will sit ‘behind’ the viewable area of the comments-grid-container DIV by virtue of the fixed heights and widths each are given and the overflow attributes of the comments-grid-container DIV.

Here is the HTML code used. Although a Datagrid has been used in this case it is possible to have other elements e.g. a Table, Image, another DIV instead.

<form id="form1" runat="server">
    <div class="comments-container ">
        <div class="comments-header-container">
            <table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" class="comments-header">
            <tr>
                <td style="width: 150px; text-align: center; color: black">Date</td>
                <td style="width: 150px; text-align: center; color: black">User</td>
                <td style="width: 400px; text-align: center; color: black">Comment</td>
            </tr>
        </table>
        </div>
        <div class="comments-grid-container ui-widget-content">
            <asp:GridView ID="CommentsGrid" runat="server" AutoGenerateColumns="False" ClientIDMode="Static" HeaderStyle-CssClass="hidden" GridLines="None" EmptyDataText="There are no comments to display." RowStyle-VerticalAlign="Top">
                <AlternatingRowStyle BackColor="#EEEEEE" />
                <Columns>
                    <asp:BoundField ItemStyle-Width="150px" DataField="CreatedDate">
                        <ItemStyle Width="150px"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField ItemStyle-Width="150px" DataField="UserId">
                        <ItemStyle Width="150px"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField ItemStyle-Width="400px" DataField="CommentText">
                        <ItemStyle Width="400px"></ItemStyle>
                    </asp:BoundField>
                </Columns>
            </asp:GridView>
        </div>
    </div>
</form>

I have added a resizable jQuery feature to the DIV surrounding the Datagrid with properties which restrict to only allow the height to be resized.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript">
    $(".comments-grid-container").resizable({
        maxHeight: 300,
        maxWidth: 717,
        minHeight: 75,
        minWidth: 717
	});
</script>

This is now where the magic happens, in the CSS. The wdiths and heights can be changed to suit the layout of the parent page/element.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>

<style>
	.comments-container {
		display: inline;
		width: 750px;
		left: 170px;
		position: relative;
	}

	.comments-header-container {
		height: 20px;
		width: 600px;
		margin: 0 !important;
		padding: 0;
	}

	.comments-header {
		font-family: Arial;
		font-size: 10pt;
		width: 700px;
		color: white;
		border-collapse: collapse;
		height: 100%;
	}

	.comments-grid-container {
		height: 75px;
		width: 717px;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.hidden {
		display: none;
	}
</style>

As I mentioned at the beginning, this is a quick and easy approach which works but with some limitations. Due to these limitations there a probably fewer scenarios where this approach will work.