Horizontal Scrolling

CSS horizontal scroll

You can use display:inline-block with white-space:nowrap. Write like this:

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap;
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

Check this http://jsfiddle.net/YbrX3/

Is horizontal scrolling within a container considered inaccessible (even though the page itself is responsive)

I believe that 1.4.10 Reflow is intended to address webpages where the entire page requires vertical and horizontal scrolling to be readable on mobile devices. If yours only requires horizontal scrolling in one small area, then you should be fine.

This may be helpful:

1.4.10 Reflow (AA)

Intent:
Having to scroll in two dimensions to view content on a page makes seeing and reading the content difficult. If a user has to scroll in order to see a full line of text, it becomes very difficult to then follow to the next line.

https://dequeuniversity.com/resources/wcag2.1/1.4.10-reflow

It's also worth noting a couple of things with a design like this:

• The items in this section need to be keyboard accessible, as per 2.1.1. Keyboard.
• The user should be able to scale the text to 200% without the layout breaking, as per 1.4.4. Resize Text.
• When a keyboard user tabs through the links, the focus ring should be visible, as per 2.4.7 Focus Visible.

Horizontal scrolling in mobile view in html/css

Try adding flex none to the divs so that their size is preserved and a media query where you want desktop to start.

.images {
    display: flex;
    align-items:center;
    background-color: #eee;
    padding: 1rem;
    overflow-x: scroll;
}

.images > div {
    flex: none;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
    max-width:100%;
    width: 100%;
}

@media (min-width: 960px) {

  .images {
     overflow-x: visible;
  }

  .images > div {
    flex-basis: 0;
    flex-grow: 1;
   }
}

Vertical and Horizontal scrolling at the same time in Flutter

You Warp it with two SingleChildScrollView and one Scrollbar with give attention to ScrollOrientation, This example on how to implement it:

PS: Sorry for messy Code on DataTable but I don't have time to write formated code

import 'package:flutter/material.dart';
    
    class TestPage extends StatelessWidget {
      TestPage({Key? key}) : super(key: key);
      final ScrollController controller = ScrollController();
      final ScrollController controller2 = ScrollController();
      @override
      Widget build(BuildContext context) {
        return Scrollbar(
          controller: controller2,
          isAlwaysShown: true,
          child: SingleChildScrollView(
            controller: controller2,
            scrollDirection: Axis.horizontal,
            child: SingleChildScrollView(
              controller: controller,
              child: DataTable(
                columns: const [
                  DataColumn(label: Text('Test')),
                  DataColumn(label: Text('Test')),
                  DataColumn(label: Text('Test')),
                  DataColumn(label: Text('Test')),
                  DataColumn(label: Text('Test')),
                ],
                rows: const [
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                  DataRow(
                    cells: [
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                      DataCell(
                        Text('tesssssssssssssssssssssssssssssssssst'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

---

Related Topics