When using Google browser, there will be a horizontal scroll bar, other browsers do not have this problem, how to ask for help?

http://www.xinlizhiyouni.com/.

Scroll bars appear when using Google browser, which I think is caused by the picture rotation function.

there is no error in other browsers. May I ask what caused it? thank you

<div class="carousel" id="carousel">
            <div class="imageList">
                <ul>
                    <li><a href="-sharp"><img class="carousel_images" src="images/top640_1.jpg"></a></li>
                    <li><a href="-sharp"><img class="carousel_images" src="images/top640_2.jpg"></a></li>
                    <li><a href="-sharp"><img class="carousel_images" src="images/top640_3.jpg"></a></li>
                    <li><a href="-sharp"><img class="carousel_images" src="images/top640_4.jpg"></a></li>
                    <li><a href="-sharp"><img class="carousel_images" src="images/top640_5.jpg"></a></li>
                </ul>
            </div>
            <div id="previousImage"></div>
              <div id="nextImage"></div>
        </div>
.imageList {
    position: relative;
}

.carousel{
    width:100%;
    overflow: hidden;
    border:1px solid black;
    height: 350px;

}
.carousel ul{
    list-style: none;
}
.carousel ul li{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
}
.carousel ul li img{
    width:100%;
}

.carousel_images {
    height: 350px;
}

@media only screen and (max-width: 640px) {
    .carousel_images {
        height: 250px;
    }
    
    .carousel{
        height: 200px;
        margin-top: 0px;
    }
}
var carousel = document.getElementById("carousel");
var imageLis = document.querySelectorAll("-sharpcarousel ul li")
//
var idx=2;
var next=3;
var prev=1;

//
var previousImage = document.getElementById("previousImage");
//
var nextImage = document.getElementById("nextImage");


var windowWidth = 0;
//
init();
//
window.onreset = init;
function init() {
    //,,
    windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //windowWidth / height = 200 /130;
    
    var carouselFirst = 200 / 130 ;
    //carousel.style.height = windowWidth / carouselFirst + "px";
    
    // carousel.style.height = 200 + "px";
    //li
    for (var i=0; i<imageLis.length;iPP){
        // transform  2D  3D 
        imageLis[i].style.webkitTransform = "translateX(" + windowWidth + "px)";
        //imageLis[i].style.height = 250 + "px";
    }
    //,
    noneTransition();
    //,,
    changex();
}
function noneTransition() {
    imageLis[idx].style.transition = "none";
    imageLis[next].style.transition = "none";
    imageLis[prev].style.transition = "none";
}
function changex() {
    imageLis[idx].style.webkitTransform = "translateX(0px)";
    imageLis[next].style.webkitTransform = "translateX(" + windowWidth + "px)";
    imageLis[prev].style.webkitTransform = "translateX(" + -windowWidth + "px)";
}
//
carousel.addEventListener("touchstart",touchstartHandle,false);
carousel.addEventListener("touchmove",touchmoveHandle,false);
carousel.addEventListener("touchend",touchendHandle,false);
//
var deltaX = 0;
//
var startX = 0;
//
var startTime = 0;

function touchstartHandle(event) {
    event.preventDefault();
    //,1,
    if (event.touches.length > 1){
        return;
    }
    //
    deltaX = event.touches[0].clientX;
    //
    startX = event.touches[0].clientX;
    //
    noneTransition();
    //
    changex();
    //
    startTime = new Date();
}
function touchmoveHandle() {
    event.preventDefault();
    //
    if (event.touches.length > 1){
        return;
    }
    //
    var clientX = event.touches[0].clientX - deltaX;
    //
    imageLis[idx].style.webkitTransform = "translateX(" + clientX + "px)";
    imageLis[next].style.webkitTransform = "translateX(" + (windowWidth + clientX) + "px)";
    imageLis[prev].style.webkitTransform = "translateX(" + (-windowWidth + clientX) + "px)";
}
function touchendHandle(event) {
     event.preventDefault();
     //
    //
    var distence = event.changedTouches[0].clientX - startX;
    //
    var time = new Date() - startTime;
    console.log(distence,time);
    //  ,,
    //50030
    //,,
    if (distence >= windowWidth / 2 || (distence > 30 && time < 500)){
        console.log("");
        //
        /*perv=1 idx=2 next=3
        * -->
        * prev=0 inx=1 next=2
        *
        * */
        next = idx;
        idx = prev;
        prev--;
        if (prev < 0){
            prev = 4;
        }

        //,
        //
        imageLis[idx].style.transition = "all 0.3s ease 0s";
        imageLis[next].style.transition = "all 0.3s ease 0s";
        //
        imageLis[idx].style.webkitTransform = "translateX(0px)";
        imageLis[next].style.webkitTransform = "translateX(" + windowWidth + "px)";

    } else if (distence < -windowWidth / 2 || (distence < -30 && time < 500)){
        showNext();
        console.log("")
    } else{
        console.log("")
        //,
        imageLis[idx].style.transition = "all 0.3s ease 0s";
        imageLis[prev].style.transition = "all 0.3s ease 0s";
        imageLis[next].style.transition = "all 0.3s ease 0s";
        //
        changex();
    }
}
function showNext() {
    /*
    * prev=1 idx=2 next=3;
    * -->
    * prev=2 idx=3 next=4
    * */
    prev=idx;
    idx=next;
    nextPP;
    if (next > 4){
        next = 0;
    }
    //next
    imageLis[next].style.transition = "none";
    imageLis[next].style.webkitTransform = "translateX("+ windowWidth + "px)";

    imageLis[idx].style.transition = "all 0.3s ease 0s";
    imageLis[prev].style.transition = "all 0.3s ease 0s";

    imageLis[idx].style.webkitTransform = "translateX(0px)";
    imageLis[prev].style.webkitTransform = "translateX(" + -windowWidth + "px)";
}



function autoPlay(){
    var timer=setInterval(function(){
        showNext()
    },2000)
}

autoPlay();
Aug.18,2021

The width of

is 100%, and the border of 1px is set.
the box-sizing of the element can be modified.

Menu