Есть горизонтальное меню, которое состоит из нескольких кнопочек. Я поместил его в контейнер ограниченной высоты и длины. Часть этих кнопочек выходит за пределы контейнера и обрезается.
LIVE DEMO
Помогите пожалуйста сделать так чтобы меню прокручивалось влево при свайпе влево по нему и прокручивалось вправо при свайпе вправо по нему. Событие свайпа я уже реализовал на показанном выше примере(см. вывод консоли).
Важно то, что у контейнера, который вмещает кнопочки меню длина не задана жёстко, а задана при помощи max-width.
html:
<span
class="wrap"
fxFlex="1 1 auto"
fxLayoutGap="5px"
(swipe)="onSwipe($event)"
>
<button>
my_beauty_button1
</button>
<button>
my_beauty_button2
</button>
<button>
my_beauty_button3
</button>
<button>
my_beauty_button4
</button>
<button>
my_beauty_button5
</button>
<button>
my_beauty_button6
</button>
<button>
my_beauty_button7
</button>
</span>
css:
.wrap {
width: 100%;
max-width: 500px;
overflow: hidden;
background: yellow;
height: 26px;
box-sizing: border-box;
flex: 1 1 auto;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
display: flex;
}
js:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
})
export class AppComponent {
eventText = '';
onSwipe(evt) {
const x = Math.abs(evt.deltaX) > 40 ? (evt.deltaX > 0 ? 'right' : 'left'):'';
console.log('swipe:', x)
}
}
Простой
