Problems moving end Subtotal

css scroll text beyond

• html

<div class="box">
    <p class="animate">
        君不见黄河之水天上来，奔流到海不复回，君不见高堂明镜悲白发，朝如青丝暮成雪，人生得意须尽欢，莫使金樽空对月
    </p>
</div>

• css

        .box {
            width: 300px;
            margin: 0 auto;
            position: relative;
            border: 1px solid #ff6700;
        }

        .animate {
            padding-left: 20px;
            font-size: 12px;
            color: #000;
            display:inline-block;
            white-space: nowrap;
            animation: 5s wordsLoop linear infinite forwards;
        }

        @keyframes wordsLoop {
            0% {
                transform: translateX(0px);
              
            }
            100% {
            /* translateX的值可根据实际情况调节*/
                transform: translateX(calc(-100% + 280px));
            
            }
        }

Moving beyond the end of the rolling scroll component implementation

• html

    <div id="out">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
    </div>

• css

        #out {
            width: 300px;
            height: 150px;
            padding:10px 0;
            border:1px solid red;
            overflow-x: scroll;
            display: -webkit-box;
            /*兼容ios允许独立的滚动区域和触摸回弹*/
            -webkit-overflow-scrolling: touch;
        }
        #out::-webkit-scrollbar {
            /* 隐藏滚动条 */
            display: none;
        }
        .inner{
            width: 200px;
            height: 100%;
            margin-right: 10px;
            color: #fff;
            font-size: 80px;
            background: hotpink;
            text-align: center;
            line-height: 150px;
        }

• Js used to apply an initial sliding distance

    var box = document.getElementById('out');
    //scrollTo的具体用法及传参请查看mdn文档
    box.scrollTo({
        left: 100,
        top: 0,
        behavior: 'smooth'//ios中设置behavior无效，具体版本请查看mdn
    })

About video tag compatible processing of iso and Android

Related Links: property HTML5 Video tag, methods, and events summary

Automatic fullscreen webkit-playsinline playsinline and video player can be prevented ios

<template>
      <video
        id="video"
        width="100%"
        height="100%"
        :src="videoUrl"
        :poster="poster"//封面图
        :autoplay="autoplay"
        webkit-playsinline
        playsinline
        controls
        preload
        controlslist="nodownload" //禁止播放控件的下载功能
        oncontextmenu="return false">
        <source :src="videoUrl" />
      </video>
</template>

• In webview Android apk's, video playback method of api (document.getElementById ( 'video'). Play ()) can not take the initiative to trigger only (click element, touch events) after triggering valid user interaction

vue single-page application returns in black and white in ios

• Problem Description:

    进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决

• Cause Analysis

    在ios机器上使用webview开发Vue项目时候，go history(-1)， 无法将body的高度拉掉，使得遮住，触发轻点击，方可消除遮罩

• Solution implementation principle:
  HTML, body is 100%, # app propped up telling the parent element, but the browser's default scroll scroll is not #app, but the body, certain factors, resulting in the return to history, can not be undone (ios pot), for which we will #app were absolute positioning, and let it become the object of re-scroll, thereby solving the problem

• Code

        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        #app {
            width: 100%;
            height: 100%;
            background: #fff;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            position: absolute;
            left: 0;
            top: 0;
        }

webview returned problem with H5 call micro-channel pay

• Problem Description
  A page -> micro letter payment page -> successful payment redirect_url specified page ---> press the return key -> to enter the micro-channel payment page (bug) again ---> A page back into

  When jumping micro-channel payment address, if added redirect_url return address, the fallback when it will again go through the payment address of the page, such as to resolve, do not increase rediect_url