parent
a4f21a7694
commit
45cfc25609
5 changed files with 139 additions and 8 deletions
@ -0,0 +1,97 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import ScrollContainer from "react-indiana-drag-scroll"; |
||||||
|
/** min から max までの数字の入った配列を生成する関数 */ |
||||||
|
const range = (min, max, step = 1) => { |
||||||
|
return Array.from( |
||||||
|
{ length: (max - min + step) / step }, |
||||||
|
(v, k) => min + k * step |
||||||
|
); |
||||||
|
}; |
||||||
|
export default function IndianaDragScroll() { |
||||||
|
return ( |
||||||
|
<div className="bg-blue-400 p-4 h-52"> |
||||||
|
<ScrollContainer ignoreElements={"#not-work-drag"}> |
||||||
|
<div |
||||||
|
className="bg-red-400 h-52" |
||||||
|
id="not-work-drag" |
||||||
|
style={{ |
||||||
|
height: "100%", |
||||||
|
background: "rgba(0, 208, 255, 0.8)", |
||||||
|
position: "absolute", |
||||||
|
display: "flex", |
||||||
|
flexDirection: "column", |
||||||
|
justifyContent: "space-between", |
||||||
|
left: "12%", |
||||||
|
}} |
||||||
|
></div> |
||||||
|
<div className="flex flex-col h-52 bg-red-400" style={{}}> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
<div>mahdi</div> |
||||||
|
</div> |
||||||
|
</ScrollContainer> |
||||||
|
<div className="w-full bg-yellow-300 h-5 my-20 text-center text-base text-red-600 rounded"> |
||||||
|
divider between vertical && horizontal scroll bar inside |
||||||
|
IndianaDragScroll COMPONENT |
||||||
|
</div> |
||||||
|
<ScrollContainer ignoreElements={"#not-work-drag"}> |
||||||
|
<div |
||||||
|
id="not-work-drag" |
||||||
|
style={{ |
||||||
|
height: "100%", |
||||||
|
background: "rgba(0, 208, 255, 0.8)", |
||||||
|
position: "absolute", |
||||||
|
display: "flex", |
||||||
|
flexDirection: "column", |
||||||
|
justifyContent: "space-between", |
||||||
|
left: "12%", |
||||||
|
}} |
||||||
|
> |
||||||
|
<div>この上では</div> |
||||||
|
<div>ドラッグしてもスクロールしません</div> |
||||||
|
</div> |
||||||
|
<div style={{ display: "flex" }}> |
||||||
|
{range(0, 100).map((i, index) => ( |
||||||
|
<div key={index} style={{ margin: "1em .25em" }}> |
||||||
|
{i} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</ScrollContainer> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue