Question

我试图像这样制作一个水平滚动菜单栏：

＆＃13;

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

＆＃13;

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

＆＃13;

我的问题是：如何在jQuery中获得.scrollmenu的全宽？我的意思是它显示+隐藏的部分。如果我使用$(".scrollmenu").width();，我只得到该div的可见部分的宽度。

Answer 1

要访问DOM Element的属性列表，您可以使用 jQuery 的#include <stdint.h> // for flexability, do not overlap the 'typedef' with the struct definition // (and always use a struct tag name) typedef struct { uint32_t a; uint32_t b; } s_t; int main( int argc, char** argv ) <-- causes 2 compiler warning messages // due to unused parameters // suggest: int main( void ) { uint32_t address = 17; s_t* ps = (s_t*) address; <-- 17 is not a valid address for a struct. // ugly <-- however, it actually works uint8_t* gna = (uint8_t*) ps; ++gna; ps = (s_t*) gna; <-- don't do this, // use 'gna' to access the individual bytes // nice ++((uint8_t*) ps); <-- does not compile } .prop()

或直接使用纯 JavaScript ：Element.scrollWidth^{MDN Docs}

$("selector").prop("scrollWidth")

// jQuery:
console.log( $(".scrollmenu").prop("scrollWidth") );
// JS
console.log( document.querySelector(".scrollmenu").scrollWidth );

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

Answer 2

您可以使用scrollWidth属性。它是一个JavaScript属性，在jQuery中没有等价物。

function getWidth() {
  console.log($(".scrollmenu")[0].scrollWidth);
}

div.scrollmenu {
  background-color: #333;
  coverflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>
<br/>
<button type="button" onclick="getWidth()">Get width</button>

Answer 3

我建议在div中包装水平滚动菜单，然后找到父级的宽度。 https://jsfiddle.net/qegufbv8/1/

<div class="wrapper">
  <div class="scrollmenu">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="#support">Support</a>
    <a href="#blog">Blog</a>
    <a href="#tools">Tools</a>  
    <a href="#base">Base</a>
    <a href="#custom">Custom</a>
    <a href="#more">More</a>
    <a href="#logo">Logo</a>
    <a href="#friends">Friends</a>
    <a href="#partners">Partners</a>
    <a href="#people">People</a>
    <a href="#work">Work</a>
  </div>
</div>

然后，您可以使用jQuery .width()来查找宽度。

$( '.wrapper' ).width();

如果您的滚动菜单宽度小于100％，请务必将display: inline-block添加到您的包装中。

jQuery中的水平滚动菜单宽度

3 个答案: