Basics 1F - For 1-Handed Use

To respect the Thumb Zone (the most comfortable area for touch with one-handed use), we can move the title bar from the top (the “ow” and “stretch” zones) to the bottom (in the “natural” zone).

Usage:

1. To move the title bar, simply override the .panther-Carousel-panelTitleBar style with position and bottom properties. To make it easier to swipe with our thumbs, we can increase the height from the 14mm default to 16mm. We can also add a shadow above the title bar.

   
   <style>
   .panther-Carousel-panelTitleBar {
       position: absolute;
       bottom: 0;
   
       height: 16mm;
       max-height: 16mm;
       line-height: 16mm;
   
       -webkit-box-shadow: 0px -5px 5px 0px rgba(50, 50, 50, 0.75);
       -moz-box-shadow: 0px -5px 5px 0px rgba(50, 50, 50, 0.75);
       box-shadow: 0px -5px 5px 0px rgba(50, 50, 50, 0.75);
   }
   </style>
                                   

2. Since the title bar will be fixed along the bottom, we'll need to adjust some CSS properties in .panther-Carousel-panelContent so overflow content doesn't run into the title bar.

   
   <style>
   .panther-Carousel-panelContent {
       position: absolute;
       top: 0;
   
       width: 85%;
       width: -webkit-calc(100% - 20px);
       width: calc(100% - 20px);
   
       height: 85%;
       height: -webkit-calc(100% - 16mm - 20px);
       height: calc(100% - 16mm - 20px);
   
       overflow-y: auto;
   }
   </style>
                                   

3. To prevent a double scrollbar, we'll need to hide the one in .panther-Carousel-carousel figure.

   
   <style>
   .panther-Carousel-carousel figure {
       overflow-y: hidden;
   }
   </style>
                                   

Hello World!

The quick brown fox jumps over the lazy dog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tempor ligula. Suspendisse ut porttitor ipsum, at viverra metus. Phasellus vitae dictum turpis, eu ultricies lacus. Vestibulum cursus pretium lectus ac accumsan. Ut fringilla vulputate nisl. Suspendisse porta nisi neque, vitae imperdiet ligula fringilla et. Aenean sagittis ante in lectus cursus, non sodales tortor pellentesque. Etiam lobortis quam eu nisi fermentum ultricies. Vestibulum viverra pulvinar enim. Cras commodo velit metus, non ultricies est rutrum sed. Phasellus gravida augue vel imperdiet mattis.