html - 单击链接 href 目标 id 纯 css 时在 slider 顶部停止滚动

Question

我在这里有一个纯 CSS slider ，但问题是我不想在从额外空间单击元素符号和箭头导航时在 slider 顶部滚动。

有没有办法用纯 html 或 css 来实现这一点？

我试过a href="#s3/"和 a href="#s3!"但它不起作用。

由于我们没有脚本 cms，因此正在寻找纯 html 和 css 解决方案。谢谢

.wrapper {
  overflow:scroll;
height:700px;
}

/* For visual purpose only */
.extra-space {
  width: 100%;
  height: 300px;
  background: red;
   line-height: 300px;
  text-align: center;
 
}

/*slider*/

.CSSgal {
  position: relative;
  overflow: hidden;
  /* Or set a fixed height */
}


/* SLIDER */

.CSSgal .slider {
  height: 100%;
  white-space: nowrap;
  font-size: 0;
  transition: 0.8s;
}


/* SLIDES */

.CSSgal .slider>* {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  height: 100%;
  width: 100%;
  background: none 50% no-repeat;
  background-size: cover;
}


/* PREV/NEXT, CONTAINERS & ANCHORS */

.CSSgal .prevNext {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 100%;
  height: 0;
}

.CSSgal .prevNext>div+div {
  visibility: hidden;
  /* Hide all but first P/N container */
}

.CSSgal .prevNext a {
  text-align: center;
  opacity: 0.7;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 0;
  position: absolute;
  width: 30px;
  height: 30px;
  display: inline-block;
  padding: 3px;
}

.CSSgal .prevNext .right {
  right: 30px;
  left: auto;
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: hsla(0, 0%, 92.2%, .6) !important;
  z-index: 1;
  cursor: pointer;
  background-image: none !important;
  transition: all .3s;
}

.CSSgal .prevNext .left {
  left: 30px;
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: none !important;
  background-color: hsla(0, 0%, 92.2%, .6) !important;
  z-index: 1;
  cursor: pointer;
  transition: all .3s;
}

.CSSgal .prevNext .left:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: url(https://new.brandsforless.ae/static/media/m-sprite.7b312d28.png) no-repeat;
  background-size: 300px;
  display: inline-block;
  background-position: -76.5px -7px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.CSSgal .prevNext .right:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: url(https://new.brandsforless.ae/static/media/m-sprite.7b312d28.png) no-repeat;
  background-size: 300px;
  display: inline-block;
  background-position: -49px -7.5px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.CSSgal .prevNext a:hover {
  background-color: #ebebeb!important;
}

.CSSgal .prevNext a+a {
  left: auto;
  right: 0;
}


/* NAVIGATION */

.CSSgal .bullets {
  position: absolute;
  z-index: 2;
  bottom: 0;
  padding: 10px 0;
  width: 100%;
  text-align: center;
}

.CSSgal .bullets>a {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f8d000;
  border: 2px solid #f8d000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.CSSgal .bullets a span {
  display: none;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.CSSgal .bullets>a+a {
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid #999;
  /* Dim all but first */
}

.CSSgal .bullets>a:hover {
  background: #f8d000;
  border: 2px solid #f8d000;
}


/* NAVIGATION BUTTONS */


/* ALL: */

.CSSgal>s:target~.bullets>* {
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid #999;
}


/* ACTIVE */

#s1:target~.bullets>*:nth-child(1) {
  background: #f8d000;
  border: 2px solid #f8d000;
}

#s2:target~.bullets>*:nth-child(2) {
  background: #f8d000;
  border: 2px solid #f8d000;
}

#s3:target~.bullets>*:nth-child(3) {
  background: #f8d000;
  border: 2px solid #f8d000;
}


/* More slides? Add here more rules */


/* PREV/NEXT CONTAINERS VISIBILITY */


/* ALL: */

.CSSgal>s:target~.prevNext>* {
  visibility: hidden;
}


/* ACTIVE: */

#s1:target~.prevNext>*:nth-child(1) {
  visibility: visible;
}

#s2:target~.prevNext>*:nth-child(2) {
  visibility: visible;
}

#s3:target~.prevNext>*:nth-child(3) {
  visibility: visible;
}


/* More slides? Add here more rules */


/* SLIDER ANIMATION POSITIONS */

#s1:target~.slider {
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
}

#s2:target~.slider {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

#s3:target~.slider {
  transform: translateX(-200%);
  -webkit-transform: translateX(-200%);
}

<div class="wrapper">
  <section class="extra-space">
  <h1>Extra space</h1>
  </section>
  <section class="mb-4">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 p-0">
          <div class="CSSgal">

            <!-- Don't wrap targets in parent -->
            <s id="s1"></s>
            <s id="s2"></s>
            <s id="s3"></s>

            <div class="slider">
              <div>
                <a href="/en-ae/brands/troop-london/">
                  <img src="https://dummyimage.com/600x400/000/fff">
                </a>
              </div>
              <div>
                <img src="https://dummyimage.com/600x400/000/fff">
              </div>
              <div>
                <img src="https://dummyimage.com/600x400/000/fff">
              </div>
            </div>

            <div class="prevNext">
              <div>
                <a class="left" href="#s3"></a>
                <a class="right" href="#s2"></a>
              </div>
              <div>
                <a class="left" href="#s1"></a>
                <a class="right" href="#s3"></a>
              </div>
              <div>
                <a class="left" href="#s2"></a>
                <a class="right" href="#s1"></a>
              </div>
            </div>

            <div class="bullets">
              <a href="#s1"><span>1</span></a>
              <a href="#s2"><span>2</span></a>
              <a href="#s3"><span>3</span></a>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Answer 1

我设法通过添加 s{display: none;} 来解决这个问题隐藏id。

/*** the solution ***/
s{
  display: none;
}

.wrapper {
  overflow:scroll;
height:700px;
}

/* For visual purpose only */
.extra-space {
  width: 100%;
  height: 300px;
  background: red;
   line-height: 300px;
  text-align: center;
 
}

/*slider*/

.CSSgal {
  position: relative;
  overflow: hidden;
  /* Or set a fixed height */
}


/* SLIDER */

.CSSgal .slider {
  height: 100%;
  white-space: nowrap;
  font-size: 0;
  transition: 0.8s;
}


/* SLIDES */

.CSSgal .slider>* {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  height: 100%;
  width: 100%;
  background: none 50% no-repeat;
  background-size: cover;
}


/* PREV/NEXT, CONTAINERS & ANCHORS */

.CSSgal .prevNext {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 100%;
  height: 0;
}

.CSSgal .prevNext>div+div {
  visibility: hidden;
  /* Hide all but first P/N container */
}

.CSSgal .prevNext a {
  text-align: center;
  opacity: 0.7;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 0;
  position: absolute;
  width: 30px;
  height: 30px;
  display: inline-block;
  padding: 3px;
}

.CSSgal .prevNext .right {
  right: 30px;
  left: auto;
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: hsla(0, 0%, 92.2%, .6) !important;
  z-index: 1;
  cursor: pointer;
  background-image: none !important;
  transition: all .3s;
}

.CSSgal .prevNext .left {
  left: 30px;
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: none !important;
  background-color: hsla(0, 0%, 92.2%, .6) !important;
  z-index: 1;
  cursor: pointer;
  transition: all .3s;
}

.CSSgal .prevNext .left:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: url(https://new.brandsforless.ae/static/media/m-sprite.7b312d28.png) no-repeat;
  background-size: 300px;
  display: inline-block;
  background-position: -76.5px -7px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.CSSgal .prevNext .right:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: url(https://new.brandsforless.ae/static/media/m-sprite.7b312d28.png) no-repeat;
  background-size: 300px;
  display: inline-block;
  background-position: -49px -7.5px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.CSSgal .prevNext a:hover {
  background-color: #ebebeb!important;
}

.CSSgal .prevNext a+a {
  left: auto;
  right: 0;
}


/* NAVIGATION */

.CSSgal .bullets {
  position: absolute;
  z-index: 2;
  bottom: 0;
  padding: 10px 0;
  width: 100%;
  text-align: center;
}

.CSSgal .bullets>a {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f8d000;
  border: 2px solid #f8d000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.CSSgal .bullets a span {
  display: none;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.CSSgal .bullets>a+a {
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid #999;
  /* Dim all but first */
}

.CSSgal .bullets>a:hover {
  background: #f8d000;
  border: 2px solid #f8d000;
}


/* NAVIGATION BUTTONS */


/* ALL: */

.CSSgal>s:target~.bullets>* {
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid #999;
}


/* ACTIVE */

#s1:target~.bullets>*:nth-child(1) {
  background: #f8d000;
  border: 2px solid #f8d000;
}

#s2:target~.bullets>*:nth-child(2) {
  background: #f8d000;
  border: 2px solid #f8d000;
}

#s3:target~.bullets>*:nth-child(3) {
  background: #f8d000;
  border: 2px solid #f8d000;
}


/* More slides? Add here more rules */


/* PREV/NEXT CONTAINERS VISIBILITY */


/* ALL: */

.CSSgal>s:target~.prevNext>* {
  visibility: hidden;
}


/* ACTIVE: */

#s1:target~.prevNext>*:nth-child(1) {
  visibility: visible;
}

#s2:target~.prevNext>*:nth-child(2) {
  visibility: visible;
}

#s3:target~.prevNext>*:nth-child(3) {
  visibility: visible;
}


/* More slides? Add here more rules */


/* SLIDER ANIMATION POSITIONS */

#s1:target~.slider {
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
}

#s2:target~.slider {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

#s3:target~.slider {
  transform: translateX(-200%);
  -webkit-transform: translateX(-200%);
}

<div class="wrapper">
  <section class="extra-space">
  <h1>Extra space</h1>
  </section>
  <section class="mb-4">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 p-0">
          <div class="CSSgal">

            <!-- Don't wrap targets in parent -->
            <s id="s1"></s>
            <s id="s2"></s>
            <s id="s3"></s>

            <div class="slider">
              <div>
                <a href="/en-ae/brands/troop-london/">
                  <img src="https://dummyimage.com/600x400/000/fff">
                </a>
              </div>
              <div>
                <img src="https://dummyimage.com/600x400/000/fff">
              </div>
              <div>
                <img src="https://dummyimage.com/600x400/000/fff">
              </div>
            </div>

            <div class="prevNext">
              <div>
                <a class="left" href="#s3"></a>
                <a class="right" href="#s2"></a>
              </div>
              <div>
                <a class="left" href="#s1"></a>
                <a class="right" href="#s3"></a>
              </div>
              <div>
                <a class="left" href="#s2"></a>
                <a class="right" href="#s1"></a>
              </div>
            </div>

            <div class="bullets">
              <a href="#s1"><span>1</span></a>
              <a href="#s2"><span>2</span></a>
              <a href="#s3"><span>3</span></a>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
</div>