Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Div tuyệt đối theo dõi nội dung có thể cuộn

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 09:28:46 26 4
mua khóa gpt4 Nike

Tôi đang tạo một menu đáp ứng với các điều khiển cuộn. Tôi gặp một vấn đề nhỏ với độ chuyển màu và các điều khiển tiếp theo khi cuộn, như bạn có thể thấy trong JSFiddle nhìn thấy nó trong.

Điều khiển menu của tôi có css của tôi

#page .page-nav .controls{}

#page .page-nav .controls:after{
    display: block;
    nội dung: không có;
    chiều rộng: 40%;
    chiều cao: 50px;
    position: absolute;
    top: 0;
    phải: 0;
    nền: -webkit-tuyến tính-gradient (trái, trong suốt 50px, đỏ);
    chỉ số z: 100;
}

#page .page-nav span {
    hình nền: url("http://www.hotel-hlosnarcisos.com/joomla/comComponents/com_jhotelreservation/assets/t/img/arrow_right.gif");
    lặp lại nền: không lặp lại;
    kích thước nền: 14px;
    chiều cao: 16px;
    chiều rộng: 16px;
    display: none;
    trên cùng: 18px;
    position: absolute;
    chỉ số z: 9999;
    cursor: pointer;
}

#page .page-nav span.previous {transform: xoay(180deg);left: 0;top: 11px;}

#page .page-nav span.next {transform: xoay(360deg);phải: 0;top: 9px;}

Có giải pháp nào không? :)

câu trả lời hay nhất

Cuối cùng đã tìm thấy giải pháp. Chỉ cần xóa nó khỏi div của bạn .page-nav Xóa trong position: relative và thêm đoạn mã sau vào div này

nền: trắng -webkit-tuyến tính-gradient (trái, trong suốt 50px, đỏ);
kích thước nền: 40% 100%;
lặp lại nền: không lặp lại;
vị trí nền: phải;

Bây giờ bạn không cần nữa .controls:sau.

$('').prependTo("#page .page-nav .menu-controls");
$('').appendTo("#page .page-nav .menu-controls");

$(".previous").click(function() {
  var posLeft = $(".page-nav").scrollLeft();
  $(".page-nav").animate({
    cuộnTrái: posLeft - 200
  }, 500);

});
$(".next").click(function() {
  var posLeft = $(".page-nav").scrollLeft();
  $(".page-nav").animate({
    cuộnTrái: posLeft + 200
  }, 500);
});
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
a {
  trang trí văn bản: không có;
}

#trang {
  position: relative;
  Họ phông chữ: "Roboto";
  độ dày phông chữ: 100;
  cỡ chữ: 13px;
  position: relative;
}

#page .container {
  width: 100%;
  chiều cao: 100px;
  lề trên: 20px;
  background: white;
}

#page .page-nav {
  nền: trắng -webkit-tuyến tính-gradient (trái, trong suốt 50px, đỏ);
  kích thước nền: 40% 100%;
  lặp lại nền: không lặp lại;
  vị trí nền: phải;
}

#page .page-nav::-webkit-scrollbar {
  -webkit-ngoại hình: không có;
  nền: trong suốt;
  chiều rộng: 0;
  chiều cao: 0;
}

#page .page-nav .items {
  display: table;
  lề: 0 tự động;
}

#page .page-nav .menu-controls {}

#page .page-nav .controls {}

#page .page-nav .item {
  hiển thị: khối nội tuyến;
}

#page .page-nav .item a {
  màu: #333333;
  display: block;
  phần đệm: 6px 15px;
}

#page .page-nav .item.current a {
  màu sắc: #0099ff;
}

#page .page-nav span {
  hình nền: url("http://www.hotel-hlosnarcisos.com/joomla/comComponents/com_jhotelreservation/assets/t/img/arrow_right.gif");
  lặp lại nền: không lặp lại;
  kích thước nền: 14px;
  chiều cao: 16px;
  chiều rộng: 16px;
  display: none;
  trên cùng: 18px;
  position: absolute;
  chỉ số z: 9999;
  cursor: pointer;
}

#page .page-nav span.previous {
  biến đổi: xoay (180deg);
  left: 0;
  trên cùng: 11px;
}

#page .page-nav span.next {
  biến đổi: xoay (360deg);
  phải: 0;
  trên cùng: 9px;
}

Màn hình @media và (độ rộng tối đa: 864px) {
  #page .page-nav {
    đường viền: 1px rắn #dedede;
    biên giới bên trái: không có;
    biên giới bên phải: không có;
    khoảng trắng: nowrap;
    tràn-x: tự động;
    -webkit-tràn-cuộn: chạm;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    phần đệm bên trái: 15px;
    phần đệm bên phải: 25px
  }
  #page .page-nav .items {
    phần đệm bên phải: 250px
  }
  #page .page-nav .controls:after {
    nội dung: '';
  }
  #page .page-nav .item a {
    phần đệm: 10px 15px;
    cỡ chữ: 13px
  }
  #page .page-nav span {
    hiển thị: khối nội tuyến;
  }
}


  

    

      
Mục menu 1
      

      
Mục menu 2
      

      
Mục menu 3
      

      
Mục menu 4
      

      
Mục menu 5
      

      
Mục menu 6
      

      
Mục menu 7
      

      
Mục menu 8
      

      
Mục menu 9
      

    


    

      

      

    

  


  

    NHẤN VÀO MŨI TÊN HOẶC GIỮ SHIFT VÀ MENU CUỘN VÀ XEM, ĐỘ SỐ ĐỎ VÀ MŨI TÊN SAU CUỘN NHƯ THẾ NÀO

Về html - div tuyệt đối trên nội dung có thể cuộn Sau đây, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/40928952/

26 4 0
Bài viết khuyến nghị: Đầu vào kiểu Vật liệu tùy chỉnh có nhãn không hoạt động
Bài viết khuyến nghị: javascript - Ghi đè các biểu tượng được tạo tự động
Bài viết khuyến nghị: Các biến Java không thay đổi Linux
Bài viết khuyến nghị: html - Căn chỉnh theo chiều dọc và sử dụng phần đệm trong trường nhập đã chọn
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress