003drag.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>mail2</title>
<!-- META Tag Start -->
<meta charset="UTF-8">
<meta id="extViewportMeta" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<!-- META Tag End -->
<!-- CSS Tag Start -->
<link rel="stylesheet" type="text/css" href="../css/base.css" />
<link rel="stylesheet" type="text/css" href="../css/layout.css" />
<!-- CSS Tag End -->
</head>
<body class="bg_lgray">
<article id="scroll_box"
style="width: 100%; height: 100vh; /* border: 1px solid black; */ overflow: hidden">
<ul class="lst_ul">
<li class="cMsg" data-msgid="103ABE17D3ACD6E94925844F0078DE53"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">오전 7:00</span><i class="ico_favo "><span
class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="793FC30FEB32A0644925844E0078DE73"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.07 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="4D7DD3E3ED8D11564925844D0078DE6B"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.06 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="16F8C4DD033CD0B44925844C0078DE60"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.05 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="411EB558E16935424925844B0078DE8C"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.04 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="EFD6F0EE6CAB80C44925844A0078DE75"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.03 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="88AD025FDD66748D492584490078DE93"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.02 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="58328CFB88496CEC492584480078DE38"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.01 07:00:12</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="797022BD6304931C492584470078DE77"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.31 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="041595B9D9C13C61492584460078DE7E"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.30 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="A7D87F923D0993B3492584450078DE60"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.29 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="C963F61C52032CEF492584440078DE72"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.28 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="9CD36240B477427B492584430078DE5A"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.27 07:00:12</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="25D35D4B6E6FB871492584420078DE78"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.26 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="14C92A96F65848F7492584410078DE7D"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.25 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="0D9323BFA59AAAC2492584400078DE65"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.24 07:00:12</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="09F40FA67169C16A4925843F0078E78A"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.23 07:00:37</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="2FE462D0A6951C624925843E0078E92E"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.22 07:00:41</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="AEC71E2F37E9A7B24925843D0078E916"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.21 07:00:41</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="894B86DE8C2692E94925843C0078E933"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.20 07:00:41</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
</ul>
</article>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="003mouse_drag_event.js"></script>
</html>
003mouse_drag_event.js
// 모바일일 경우 css 수정
// overflow: "hidden"->""
$(document).ready(function() {
var filter = "win16|win32|win64|mac|macintel";
if (navigator.platform) {
// mobile
if (filter.indexOf(navigator.platform.toLowerCase()) < 0) {
$('article#scroll_box').css("overflow", "");
}
}
});
// 마우스/터치 스크롤 기능
var dragFlag = false;
var x, y, pre_x, pre_y;
$(function() {
$('article#scroll_box').mousedown(function(e) {
dragFlag = true;
var obj = $(this);
console.log("obj:" + obj);
x = obj.scrollLeft();
y = obj.scrollTop();
pre_x = e.screenX;
pre_y = e.screenY;
$(this).css("cursor", "pointer");
});
$('article#scroll_box').mousemove(function(e) {
if (dragFlag) {
var obj = $(this);
obj.scrollLeft(x - e.screenX + pre_x);
obj.scrollTop(y - e.screenY + pre_y);
return false;
}
});
$('article#scroll_box').mouseup(function() {
dragFlag = false;
$(this).css("cursor", "default");
});
/*
* $('body').mouseup(function() { dragFlag = false; $(this).css("cursor",
* "default"); });
*/
});
파일첨부
https://drsggg.tistory.com/256
PC에서 마우스 스크롤 기능 확인
모바일에서 터치 스크롤 기능 확인
