Question

我想集中div的滚动，但是，考虑到滚动，我无法获得其宽度的值。我尝试了.width并检索了窗口的宽度，scrollWidth返回undefined。它不能具有固定值，因为图像大小会有所不同。

var myDiv = $("#visualContainer");
var scrollto = myDiv.offset().left + (myDiv.width() / 2);
myDiv.animate({
  scrollLeft: scrollto
});

console.log(myDiv.scrollWidth)

#layouts {
  text-align      : center;
  background-color: black;
  padding         : 25px 0 60px;
  color           : white;

}

#layouts h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size  : 22pt;
  line-height: 1.5;
  color      : #FFFFFF;
  padding    : 0 40px;
  margin     : 0 0 40px;
}

#visualContainer {
  overflow-x                : scroll;
  white-space               : nowrap;
  overflow-y                : hidden;
  -ms-overflow-scrolling    : touch;
  -moz-overflow-scrolling   : touch;
  -o-overflow-scrolling     : touch;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling        : touch;
  -ms-overflow-style        : -ms-autohiding-scrollbar;
}

#visualContainer::-webkit-scrollbar {
  display: none;
}

.innerSlide {
  display  : inline-block;
  width    : 80%;
  max-width: 320px;
  padding  : 0 5px;
}

.slide-image {
  max-width   : 100%;
  max-height  : 85vh;
  border-style: solid;
  border-width: 5px;
  border-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="layouts">
      <h2>Exemplos de Layout</h2>
      <div id="visualContainer">
        <div class="innerSlide"><img class="slide-image" src="img/SITE 1.jpg"/></div>
        <div class="innerSlide"><img class="slide-image" src="img/SITE CERVEJA.jpg"/></div>
        <div class="innerSlide"><img class="slide-image" src="img/SITE 3.jpg"/></div>
      </div>
    </section>

Answer 1

googlesheets会返回jQuery object。但是，scrollWidth是DOM元素的只读属性。因此，您应该通过以下方式访问相应的DOM元素$("#visualContainer")：

scrollWidth

中心水平滚动

1 个答案: