# [JS30] Day.27 Click and Drag to Scroll
###### tags: `JS30`
## 任務 Task
按住圖片往右滑時，圖片也會跟著往右滑，常見的功能。

==完成時間：15min==
## 步驟 Step
1. 設立 Flag `isDown = false` 當 `mousedown` 時為 `true`，當 `mouseleave` 及 `mouseup` 時為 `false`。
2. 當 `mousedown` 時，設定最一開始的起始點為 `startX = e.pageX - slider.offsetLeft` 以及儲存當下 X 軸滾動的位置 `scrollLeft = slider.scrollLeft`。
3. 當 `mousemove` 時，確認 `isDown` 是否為 `true` ，如果是則設定動態的 `x = e.pageX-slider.offsetLeft` 在算出 `walk = x - startX` ，滑動了多少的距離。
4. 最後設定元素滾動距離等於起始滾動距離扣掉移動的距離 `scrollLeft - walk`。
## 筆記 Note
### <font color=#337EA9>CSS user-select</font>
* 當元素裡有文字時，可以設定是否選取。
* `user-select: auto`：預設為 text。
* `user-select: none`：無法選取。
* `user-select: text`：可以選取文字。
* `user-select: none`：一次選取全部。
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS user-select" src="https://codepen.io/jim876633/embed/mdxPWBY?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/mdxPWBY">
CSS user-select</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### <font color=#337EA9>CSS perspective</font>
* 設定在元素的父層，設定距離長度。
* 想像成物件距離螢幕的距離，值越大代表越遠。
### <font color=#337EA9>JS Element.client</font>
* 元素與邊框的距離
* [參考](https://javascript.info/size-and-scroll)
### <font color=#337EA9>JS Mouse Event e.page</font>
* 元素與文件（HTML）的距離。

## 想法 Idea
:::warning
:bulb: <font color=black>做一個立體正方體。
</font>
:::

<iframe height="300" style="width: 100%;" scrolling="no" title="3D-Cube" src="https://codepen.io/jim876633/embed/zYWqPvY?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/zYWqPvY">
3D-Cube</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>