The viewport already clips your tiles (I assume, since you mentioned vertex arrays, that they aren't drawn as pixel rectangles).

The easy solution isn't really that difficult. I get the feeling that you may be thinking too much about complex solutions to this.

• Define the viewport as the region of the screen where you want the game to be drawn. I see in your first two screen shots that the map covers the whole screen except for the top row. What I mean here is that your viewport should only cover the region of the screen where the map is to be drawn. Make a separate viewport for the score board in a second pass, but I will not consider that here.
• Set the coordinate system (for example with glOrtho) such that the desired part of the map is visible within the viewport. All you need to do to scroll the map is to adjust the coordinate system. No need to touch the viewport itself.
• Draw the visible tiles. You know the bounds of the visible region of the map, so draw only those tiles if you want to do some primitive culling. You can draw the entire map as well if you want, since the viewport is clipping anyway. If you want partial-tile-scrolling, then you just round the visible region's left and bottom borders down to nearest tile-border, and the right and upper borders up to nearest tile-border.

With these steps where you separate the viewport, the coordinate system and the drawing, you really don't have to do much to implement scrolling and clipping. It's all handled pretty much automatically.

edit: By the way, what the name of the game in the first two images? It was one of my favorite games way back, but I just can't remember the name now.

The viewport already clips your tiles (I assume, since you mentioned vertex arrays, that they aren't drawn as pixel rectangles).

The easy solution isn't really that difficult. I get the feeling that you may be thinking too much about complex solutions to this.

• Define the viewport as the region of the screen where you want the game to be drawn. I see in your first two screen shots that the map covers the whole screen except for the top row. What I mean here is that your viewport should only cover the region of the screen where the map is to be drawn. Make a separate viewport for the score board in a second pass, but I will not consider that here.
• Set the coordinate system (for example with glOrtho) such that the desired part of the map is visible within the viewport. All you need to do to scroll the map is to adjust the coordinate system. No need to touch the viewport itself.
• Draw the visible tiles. You know the bounds of the visible region of the map, so draw only those tiles if you want to do some primitive culling. You can draw the entire map as well if you want, since the viewport is clipping anyway. If you want partial-tile-scrolling, then you just round the visible region's left and bottom borders down to nearest tile-border, and the right and upper borders up to nearest tile-border.

With these steps where you separate the viewport, the coordinate system and the drawing, you really don't have to do much to implement scrolling and clipping. It's all handled pretty much automatically.