Сдвижные встроенные кнопки Мобильный телефон

Question

У меня есть упорядоченный встроенный список кнопок, которые я сделал, чтобы выйти из экрана. Я хочу, чтобы эти кнопки были удалены, чтобы вы могли найти те, которые выходят из экрана.

<style> 
    .banner-test { 
     transition: all 0.4s ease; 
     overflow: hidden; 
     height: auto; 
     padding: .625em .850em; 
     position: fixed; 
     z-index: 100; 
     bottom: 0px; 
     width: 100%; 
     /* Fallback for web browsers that doesn't support RGBa */ 
     background: rgb(0, 0, 0); 
     /* RGBa with 0.6 opacity */ 
     background: rgba(0, 0, 0, 0.6); 
     /* For IE 5.5 - 7*/ 
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
     /* For IE 8*/ 
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
     -webkit-transform: translate3d(0, 0px, 0); 
     transform: translate3d(0, 0px, 0); 
    } 
    .ui-btn { 
     background: #f6f6f6; 
     border-color: #ddd; 
     color: #333; 
     text-shadow: 0 1px 0 #f3f3f3; 
     font-weight: 700; 
     font-size: 16px; 
     margin: .5em 0; 
     padding: .7em 1em; 
     display: block; 
     border-width: 1px; 
     border-style: solid; 
     position: relative; 
     text-align: center; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space: nowrap; 
     cursor: pointer; 
     -webkit-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    } 
    .ui-btn:link { 
     text-decoration: none; 
    } 
    .ui-btn-inline { 
     display: inline-block; 
     vertical-align: middle; 
     margin-right: .625em; 
    } 
    .swiper-holder { 
     width: 170%; 
     white-space: nowrap; 
    } 
    .swiper-holder div { 
     width: 16%; 
     display: inline; 
    } 
</style> 
<div class="banner-test"> 
    <div class="swiper-holder"> 
     <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div> 
     <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div> 
     <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div> 
     <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div> 
     <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div> 
     <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div> 
     <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div> 
     <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div> 
    </div> 
</div> 

Можно ли это сделать непосредственно в jQuery? Я посмотрел и узнал о touchhend, touchstart и т. Д., Но я действительно не знаю, с чего начать, и будет ли это поддерживаться в большинстве браузеров?

В этом нет ничего в сети, и я не видел, чтобы кто-то еще это делал.

Fiddle: https://jsfiddle.net/ye2q5ede/

Answer 1

Вы можете попробовать этот плагин http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html

Это дает вам все виды сенсорных событий и хорошо работает на всех устройствах.

Answer 2

Это метод, который содержит кнопки в обертке, и когда окно браузеров становится более узким, оно позволяет прокручивать полосу прокрутки пальцем на мобильном телефоне.

HTML

<div class="wrapper"> 
    <input type="button" class="button" value="Select"> 
    <input type="button" class="button" value="Select"> 
    <input type="button" class="button" value="Select"> 
    <input type="button" class="button" value="Select"> 
    <input type="button" class="button" value="Select"> 
    <input type="button" class="button" value="Select"> 
    <input type="button" class="button" value="Select"> 
</div> 

CSS

body { 
     background-color: #333; 
    } 
    .wrapper { 
     width: 100%; 
     white-space: nowrap; 
     overflow-y: hidden; 
     overflow-x: auto; 
     -webkit-overflow-scrolling: touch; 
     padding: 1rem; 
     background-color: #ccc; 
    } 

.internal { 
    display: inline; 
    background-color: wheat; 
    &:nth-child(odd) { 
    background-color: hotpink; 
    } 
} 

JSFiddle