This sample demonstrates how to customize the user interaction experience of your Windows Store apps using JavaScript through pan/scroll and zoom app views. (A view is the way in which the content of your app is accessed and manipulated by a user.)

Note  This sample was created using one of the universal app templates available in Visual Studio. It shows how its solution is structured so it can run on both Windows 8.1 and Windows Phone 8.1. For more info about how to build apps that target Windows and Windows Phone with Visual Studio, see Build apps that target Windows and Windows Phone 8.1 by using Visual Studio.

Specifically, this sample covers the following pan/scroll and zoom behaviors:

This sample is written in HTML, Cascading Style Sheets (CSS), and JavaScript. For the Extensible Application Markup Language (XAML) version, see the XAML ScrollViewer sample.

To obtain an evaluation copy of Windows 8.1, go to Windows 8.1.

To obtain an evaluation copy of Microsoft Visual Studio 2013, go to Visual Studio 2013.

Note  For Windows 8 app samples, download the Windows 8 app samples pack. The samples in the Windows 8 app samples pack will build and run only on Microsoft Visual Studio 2012.

Related topics

Gestures, manipulations, and interactions
Getting started with apps
Guidelines for optical zoom and resizing
Guidelines for panning
Responding to user interaction
Windows 8 app samples
Roadmap for apps using JavaScript
Touch: Zooming and Panning
Document Object Model (DOM) Events
WinJS.Utilities Namespace

Operating system requirements

Windows 8.1
Windows Server 2012 R2
Windows Phone 8.1

Build the sample

  1. Start Microsoft Visual Studio 2013 Update 2 and select File > Open > Project/Solution.
  2. Go to the directory to which you unzipped the sample. Then go to the subdirectory named for the sample and double-click the Visual Studio 2013 Update 2 Solution (.sln) file.
  3. Follow the steps for the version of the sample you want:
    • To build the Windows version of the sample:

      1. Select Controls_ScrollView.Windows in Solution Explorer.
      2. Press Ctrl+Shift+B, or use Build > Build Solution, or use Build > Build Controls_ScrollView.Windows.
    • To build the Windows Phone version of the sample:

      1. Select Controls_ScrollView.WindowsPhone in Solution Explorer.
      2. Press Ctrl+Shift+B or use Build > Build Solution or use Build > Build Controls_ScrollView.WindowsPhone.

Run the sample

The next steps depend on whether you just want to deploy the sample or you want to both deploy and run it.

Deploying the sample

Deploying and running the sample