html - 如何在不滚动主体滚动条的情况下在带有滚动条的 div 中使用 focus() 来聚焦 id

Question

每当我尝试专注于加载 id（图像中的帐户设置）时，整个页面都会向下滚动 - 左右容器 div。当我专注于帐户设置 div （左 div 的底部带有溢出-y）并且右 div 将在顶部（不向下滚动）时，我怎样才能使它只有左 div 在加载时向下滚动？

我正在使用此代码来关注负载：

<script>
var hash = window.location.hash;
$('#'+hash).focus();
</script> 

详细图片：

这是一个示例代码：

var hash = window.location.hash;
$('#' + hash).focus();  
 

/**Logo **/

.uk-logo {
  color: #0026ca !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 30px !important;
}


/** Navigation Override **/

.uk-navbar-item,
.uk-navbar-nav>li>a,
.uk-navbar-toggle {
  height: 50px!important;
}

[class*=uk-navbar-dropdown-bottom] {
  margin-top: 0px !important;
}

.main-nav .uk-navbar-dropdown {
  z-index: 9999 !important;
}

.nav-container {
  background-color: #f8f8f8 !important;
}

.sub-nav-container {
  background-color: #000000 !important;
}

.subnav {
  background-color: #000000 !important;
  height: 40px!important;
  z-index: 1 !important;
}

.subnav .uk-navbar-nav>li>a {
  color: #fff;
}


/** Cart **/

.nopadding {
  padding: 0px !important;
}


/** Event Icons **/

.top-details a {
  display: block;
}

strong {
  color: #404040;
}

.icon-details {
  margin-top: 10px;
}

.icon-image {
  height: 150px;
}

.event-price-container {
  padding: 3px;
}

.event-price {
  color: #000;
}

.organizer-logo-container {
  border: 1px solid #e0e0e0;
  height: 90px !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.top-details .date,
.top-details .organizer,
.top-details .certificate {
  font-size: 13px;
  padding-left: 10px;
  text-align: left;
  padding-top: 5px;
}

.event-title h3 {
  color: #404040;
  font-size: 16px;
  text-align: left;
  font-weight: bold;
  margin-bottom: 5px;
}

.event-title {
  margin-top: 10px;
}

.event-title p {
  text-align: left;
  font-size: 12px;
  margin-top: 0px;
  margin-bottom: 10px;
}

.social-share {
  font-size: 11px !important;
}

.event-buttons>div {
  padding-right: 5px;
}

.uk-card-body {
  margin: 10px !important;
}

.share {
  background-color: #3F51B5;
  color: #fff !important;
}

.share:hover {
  background-color: #7986CB;
}

.bookmark {
  background-color: #9C27B0;
  color: #fff !important;
}

.bookmark:hover {
  background-color: #CE93D8;
}

.more-info {
  background-color: #009688;
  color: #fff !important;
}

.more-info:hover {
  background-color: #80CBC4;
}

.tags .uk-badge {
  background: #ECEFF1 !important;
  color: #607D8B;
  padding: 10px;
}

.tags .uk-badge:hover {
  color: #03A9F4;
}

.tags {
  margin-bottom: 15px;
  text-align: left !important;
}

.load-more-events {
  text-align: center;
  margin-top: 20px;
}

.payment-logo {
  padding-bottom: 60px !important;
}


/** footer **/

footer {
  width: 100%;
  background-color: #212121;
  padding-top: 30px;
}

footer h4 {
  font-size: 18px;
  color: #757575;
  margin-bottom: 15px;
}

footer ul li a {
  color: #9E9E9E;
  text-decoration: none;
}

footer ul li a:hover {
  color: #E0E0E0;
  text-decoration: none;
}

footer ul {
  padding: 0px;
  margin-top: 0px;
}

footer ul li {
  list-style: none;
  padding-bottom: 10px;
}

footer .small-logo {
  margin-top: 30px;
  background: #424242;
  padding-top: 20px;
  padding-bottom: 20px;
}

footer .small-logo p {
  margin-top: 10px;
  color: #E0E0E0;
  margin-bottom: 0px;
}

footer .social-media-icons {
  margin-top: 10px;
}

footer .social-media-icons a:hover {
  color: #E0E0E0;
}

footer .copyright {
  color: #9E9E9E;
  font-size: 14px;
  background: #000;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dashboard {
  padding-top: 30px;
  min-height: 400px;
}

.side-navigation {
  width: 300px;
  float: left;
  left: 0px;
  background: #212121;
  z-index: 999;
  overflow: auto;
  height: 550px;
}

.side-navigation hr {
  margin-top: 30px;
  margin-bottom: 10px;
}

.side-navigation-container h3 {
  margin-left: 20px;
  margin-bottom: 0px;
  padding-right: 20px;
  color: #BDBDBD;
  font-size: 22px;
}

.side-navigation-container img {
  padding-top: 14px;
}

.small-margin {
  margin-right: 15px !important;
}

.side-navigation-container label {
  display: block;
  font-size: 14px;
}

.side-navigation-container ul li a {
  color: #fff;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px !important;
}

.side-navigation-container ul li:hover {
  background: #BDBDBD;
  color: #212121;
}

.uk-nav-sub:hover {
  color: #fff!important;
}

.uk-nav-sub {
  background: #212121;
  color: #fff!important;
  padding: 0px !important;
}

.uk-nav-sub li:hover,
.side-navigation-container .active {
  background: #616161 !important;
  color: #fff !important;
}

.uk-nav-sub li:hover a,
.side-navigation-container .active a {
  color: #fff !important;
}

.uk-nav-sub li {
  padding: 5px 0 5px 15px;
}

.side-navigation-container ul li:hover a {
  color: #424242;
}

.side-navigation-container ul li:hover ul li a {
  color: #fff;
}

.dashboard-menu {
  margin-left: 15px;
  color: #fff;
}

.dashboard-menu:hover {
  color: #BDBDBD;
  text-decoration: none;
}

.uk-offcanvas-bar {
  padding: 40px 0px !important;
}

.side-navigation-container ul li {
  border-bottom: 1px solid #333;
}

.side-navigation ul li {
  padding-top: 5px;
}

.uk-nav-sub li {
  background: #181819 !important;
}

.side-navigation ul li:last-child {
  border-bottom: 0px !important;
}

.uk-nav-sub li:hover,
.uk-nav-sub .active {
  background: #263238 !important;
}

.grid {
  color: #616161;
}

.side-navigation-container {
  padding-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.5/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.5/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.5/css/uikit.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>


</head>

<body>


  <div class="uk-offcanvas-content">
    <div class="nav-container" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar main-nav">
      <div class="uk-container uk-container-large ">
        <nav class="uk-navbar-container " uk-navbar style="position: relative; z-index: 980;">

          <div class="uk-navbar-left">
            <a href="" class="uk-navbar-item uk-logo">

            </a>
          </div>
          <div class="uk-navbar-right">
            Today is Aug 24, 2019
          </div>
        </nav>
      </div>
    </div>
    <!--Sub Navigation -->
    <div class="sub-nav-container">
      <div class="uk-container uk-container-large ">
        <nav class="uk-navbar-container subnav" uk-navbar style="position: relative; z-index: 980;">

          <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
              <li><a href="#">Help</a></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

    <div class="side-navigation">
      <div>
        <div>

          <div class="side-navigation-container">
            <div class="uk-panel">

              <h3><img src="http://via.placeholder.com/50x50" class="uk-align-left small-margin" /> Hello Pangasinan State University!</h3>

              <label>
                    Not sure what to do with this page? <a href="#">Watch this tutorial</a>.</label>
            </div>
            <hr/>
            <ul class="uk-nav uk-nav-parent-icon " data-uk-nav="{multiple:true}">
              <li class="  ">
                <a href="#"><span uk-icon="thumbnails"></span> Dashboard</a>
              </li>
              <li class=" ">
                <a href="#"><span uk-icon="calendar"></span> Events</a>
              </li>
              <li class="  ">
                <a href="#"><i uk-icon="cart"></i> Revenues</a>
              </li>
              <li class="  ">
                <a href="#"><i uk-icon="credit-card" ></i> Payment Settings</a>
              </li>
              <li class="  ">
                <a href="#"><i uk-icon="facebook"></i> Social Media</a>
              </li>
              <li class="  ">
                <a href="#"><i uk-icon="image"></i> File Box</a>
              </li>
              <li class="  ">
                <a href="#"><i uk-icon="album"></i> Certificate Templates</a>
              </li>
              <li class=" ">
                <a href="#"><i uk-icon="star"></i> Event Reviews</a>
              </li>
              <li class=" ">
                <a href="#"><i uk-icon="lifesaver"></i> Support Tickets</a>
              </li>
              <li class="  ">
                <a href="#"><i uk-icon="happy"></i> Tech Support</a>
              </li>
              <li class="  ">
                <a href="#"><i uk-icon="pencil"></i> Assessment Templates</a>
              </li>
              <li class=" active" id="last">
                <a href="#last"><i uk-icon="cog"></i> Account Settings</a>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
    <div class="dashboard">

      <section class="uk-container uk-container-small uk-text-left preconfirm-container">
        <h1>Account Settings</h1>
      </section>
    </div>

    <footer>

      <div class="copyright uk-text-center">
        &copy; 2018 . All Rights Reserved
      </div>
    </footer>

  </div>
  <!-- UIkit CSS -->

</body>

</html>

因此，每当您在 url 中使用#last 运行文件时，例如 sample.html#last（如果文件是 sample.html），两个滚动条都会滚动到底部，我只希望左滚动条向下滚动。

标签： htmlcss