移動端彈性滑動以及vue記錄滑動位置

2022-03-29 05:24:22 字數 1351 閱讀 1927

```

-webkit-overflow-scrolling: auto | touch;

```auto: 普通滾動,當手指從觸控螢幕上移開,滾動立即停止

touch:滾動回彈效果,當手指從觸控螢幕上移開,內容會保持一段時間的滾動效果,繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立乙個新的堆疊上下文。```

over-flow: auto; /* winphone8和android4+ */

-webkit-overflow-scrolling: touch; /* ios5+ */

```上**:

``````

```.scrollcontainer

.scrollcontainer>ul>li

```1.父級元素scrollcontainer加上定位position: absolute|relative,滑動幾次後可滾動區域會卡主,不能在滑動

2.快速滑動頁面會出現空白,滑動停止後內容才顯示

此時,你應該給父級元素scrollcontainer加上如下**:

```//解決第乙個bug

z-index:1;

//解決第二個bug

-webkit-backface-visibility: hidden;

-webkit-transform: translate3d(0,0,0);

在vue專案中,我們可能會遇到這樣的需求,例如:

商品列表頁中,點選某一商品,進入到詳情頁。

從詳情頁中返回到商品列表頁,頁面應當顯示的頁面應當是之前的樣子。

也就是說,滾動條的位置應該快取下來;2.在商品列表生命週期activated中,監聽當前scrollcontainer父元素的滾動事件,滾動時的**中,獲取到scrolltop(滾動條距離滾動元素即scrollcontainer的距離)的值,存入到以及在deactivated中移除掉當前滾動事件的監聽。

3.在商品列表中,點選進入詳情頁中的時候,將滾動條位置被快取下來了,你可以放到sessionstorage|localstorage中。當然,如果你使用了vuex,可以直接將值放入vuex中進行管理;

4.從詳情頁中返回的時候,同時要做這樣的操作,將你存入快取中的scrolltop值重新賦予給當前div的滾動條

5.ok,思路就是這樣子,大功告成。我是用的vuex進行管理的滾動條位置,實現**如下:

//加了乙個ref,用於獲取當前dom

``````

computed:

...methods:

}...

activated(),

deactivated()

```如果有更好的辦法,互相交流。

移動端滑動事件

專案中要實現乙個功能,在寬度高度固定的乙個div中放入幾張,的高度與div的高度相等,幾張的總長度要遠遠超過div的長度,那麼問題來了,如何才能讓使用者通過手指的滑動,看到所有的呢?這個可以有兩種方法 方法一 此時,已經可以進行的滑動了 方法二 在父元素上設定white space nowrap,保...

移動端左右滑動以及滾動條

對於移動端左右滑動以及滾動條 測試文字,左右滾動時,這裡不會動 1 當文字長度超出之後 overflow x auto 屬性自動產生橫向滾動條 overflow x屬性指定如果它溢位了元素的內容區是否剪輯左 右邊緣內容。使用overflow y屬性來判斷頂部和底部邊緣是否裁剪。overflow x ...

js移動端滑動翻頁

getelementbyid 全體 content document.getelementbyid content 滑動容 var page1 document.getelementbyid page1 var page2 document.getelementbyid page2 var page...