首頁(yè) 猿問移動(dòng)端像左右滑動(dòng)元素的效果怎樣不出...

移動(dòng)端像左右滑動(dòng)元素的效果怎樣不出現(xiàn)滾動(dòng)條？

JavaScript

莫回?zé)o 2018-08-08 09:10:12

想要實(shí)現(xiàn)的效果： https://jsfiddle.net/oa4f8077/pc端的這樣的效果如果在手機(jī)上呈現(xiàn)肯定不能出現(xiàn)像demo的底部出現(xiàn)滾動(dòng)條，那莫我該如何用css方法實(shí)現(xiàn)？如果css方法行不通使用js？我引入的是zepto，zepto有左右滑動(dòng)事件，但是給他綁定的方法如何順滑的滑動(dòng)，比如向右滑動(dòng)時(shí)left 自增，向左left自減，這個(gè)速率我該如何控制？

查看完整描述

1 回答

一只萌萌小番薯

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊

overflow auto出現(xiàn)的滾動(dòng)條，在webkit內(nèi)核瀏覽器可以使用如下css樣式隱藏

.wp::-webkit-scrollbar {    display: none;
}

但是在ie下是沒辦法隱藏的，如果你僅僅只是想實(shí)現(xiàn)移動(dòng)端的隱藏就沒有這個(gè)擔(dān)憂。

在iphone的瀏覽器里，overflow auto的方式滑動(dòng)非常不流暢，因此常常需要在css中加入下面一條語句來克服這個(gè)問題

-webkit-overflow-scrolling: touch;

另外，移動(dòng)端的左右滑動(dòng)可不是這樣實(shí)現(xiàn)的，你這想法有點(diǎn)取巧，建議還是去了解一下touchstart, touchmove, touchend的方式來實(shí)現(xiàn)吧。這樣你才能進(jìn)一步了解移動(dòng)端幻燈切換是如何實(shí)現(xiàn)的

反對(duì) 回復(fù) 2018-09-17