js实现文字横向滚动与纵向滚动(支持手动滑动距离)

js实现横向滚动

 

1.布局

<div id="scroll_div" class="fl"> 
        <div id="scroll_begin">
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
        </div> 
        <div id="scroll_end"></div>
    </div> 

2.样式

.pad_right{ padding-right:2em;}
#scroll_div {height:26px;overflow: hidden;white-space: nowrap;width:535px;margin-left:10px;}
#scroll_begin,#scroll_end {display: inline;}

3.js代码：

//文字横向滚动
      ScrollImgLeft() {
        var speed = 50;
        var MyMar = null;
        var scroll_begin = document.getElementById("scroll_begin");
        var scroll_end = document.getElementById("scroll_end");
        var scroll_div = document.getElementById("scroll_div");
        scroll_end.innerHTML = scroll_begin.innerHTML;

        function Marquee() {
          if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
            scroll_div.scrollLeft -= scroll_begin.offsetWidth;
          else
            scroll_div.scrollLeft++;
          // console.log(scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
        }
        MyMar = setInterval(Marquee, speed);
        scroll_div.onmousedown = function () {
          clearInterval(MyMar);
        }
        scroll_div.onmouseover = function () {
          clearInterval(MyMar);
        }
        scroll_div.onmouseout = function () {
          MyMar = setInterval(Marquee, speed);
        }
      }

ScrollImgLeft();

js实现纵向滚动

1.布局

<div class="box" id="box" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup">
		    <div class="text" id="text">1</div>
		    <div class="text" id="text">2</div>
		    <div class="text" id="text">3</div>
		    <div class="text" id="text">4</div>
		    <div class="text" id="text">5</div>
		    <div class="text" id="text">6</div>
		    <div class="text" id="text">7</div>
		    <div class="text" id="text">8</div>
		    <div class="text" id="text">9</div>
		    <div class="text" id="text">10</div>
		    <div class="text" id="text">11</div>
		    <div class="text" id="text">12</div>
		    <div class="text" id="text">13</div>
		    <div class="text" id="text">14</div>
		    <div class="text" id="text">15</div>
		    <div class="text" id="text">16</div>
		    <div class="text" id="text">17</div>
		    <div class="text" id="text">18</div>
		    <div class="text" id="text">19</div>
		    <div class="text" id="text">20</div>
		  </div>

2.样式

.box {
	      width: 300px;
	      height: 300px;
	      border: 2px solid skyblue;
	      overflow: hidden;
	    }
	
	    .box:hover {
	      overflow-y: auto;
	    }
	
	    .text {
	      width: 100%;
	      height: 100px;
	      border: 1px solid greenyellow;
	    }

3.js代码：

export default {
		data() {
			return {
				flag: true,
				timer: '',
				time: '',
				scrollTop: 0,
				margin: 0,
				lastPointY: 0,
				isTouch: false,
			}
		},
		onLoad() {
		},
		mounted() {
			this.onscroll()
		},
		methods: {
			onscroll(){
				const dom = document.getElementById('box')
				const scpDom = document.getElementsByClassName('text')
				  let time = null
				  console.log(dom.scrollHeight, dom.offsetHeight);
				  time = setInterval(() => {
				    dom.scrollTop++
				    if (dom.scrollTop >= dom.scrollHeight - dom.offsetHeight) {
				      console.log("111");
				      dom.scrollTop = 0
				    }
				  }, 10)
			},
			mousedown(e){
				this.isTouch = true;
				this.lastPointY = e.pageY;
				console.log('鼠标按下',e.pageY)
				clearInterval(this.timer)
			},
			mousemove(e){
				const dom = document.getElementById('box')
				if (this.isTouch) {
					this.margin = e.pageY - this.lastPointY;
					dom.scrollTop -= this.margin;
					console.log(this.margin,e.pageY);
					this.lastPointY = e.pageY;
				}
			},
			mouseup(){
				const dom = document.getElementById('box')
				clearTimeout(this.time);
				this.isTouch = false;
				console.log('鼠标离开')
				this.time = setTimeout(()=>{
					this.timer = setInterval(() => {
					  dom.scrollTop ++;
					},this.speed);
				},1000)
			}
		},
		computed: {}
	}